:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #f4f6f8;
  --panel: #ffffff;
  --text: #1d232c;
  --muted: #65707d;
  --line: #dbe0e6;
  --brand: #245f93;
  --brand-2: #347bad;
  --danger: #b23535;
  --warn: #996b00;
  --ok: #247243;
  --info: #2c669d;
  --accent: #24913a;
  --shadow: 0 12px 30px rgba(27, 39, 53, 0.09);
}

/* Administrator+ RTK Base Station control panel */
.rtk-base-page { display: grid; gap: 16px; }
.rtk-hero { display: flex; justify-content: space-between; gap: 20px; padding: 22px; border: 1px solid #b9dfc3; border-radius: 18px; background: linear-gradient(135deg, #eefaf1, #fff); box-shadow: var(--shadow); }
.rtk-hero.warning { border-color: #ead59a; background: linear-gradient(135deg, #fff9e8, #fff); }
.rtk-hero.offline { border-color: #e5c7c7; background: linear-gradient(135deg, #fff3f3, #fff); }
.rtk-hero > div:first-child > span:not(.rtk-live-dot) { color: var(--ok); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.rtk-hero.warning > div:first-child > span:not(.rtk-live-dot) { color: #a36c00; }
.rtk-hero.offline > div:first-child > span:not(.rtk-live-dot) { color: #ae2c2c; }
.rtk-live-dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 13%, transparent); }
.rtk-hero.warning .rtk-live-dot { background: #d79800; box-shadow: 0 0 0 5px #f8e8bb; }
.rtk-hero.offline .rtk-live-dot { background: #c74848; box-shadow: 0 0 0 5px #f5dada; }
.rtk-hero h2 { margin: 8px 0 3px; font-size: clamp(23px, 3vw, 34px); }
.rtk-hero p { margin: 0; color: var(--muted); }
.rtk-hero-meta { display: grid; align-content: center; justify-items: end; gap: 5px; text-align: right; }
.rtk-hero-meta > strong { color: var(--ok); font-size: 18px; }
.rtk-hero-meta small { color: var(--muted); }
.rtk-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rtk-metrics > div { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }
.rtk-metrics span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.rtk-metrics strong { display: block; margin-top: 8px; font-size: clamp(22px, 2.6vw, 31px); line-height: 1; }
.rtk-metrics strong small { color: var(--muted); font-size: 12px; text-transform: none; }
.rtk-metrics p { margin: 8px 0 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.rtk-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rtk-base-page .panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.rtk-base-page .panel > header h2 { margin: 0 0 2px; font-size: 18px; }
.rtk-base-page .panel > header p { margin: 0; color: var(--muted); font-size: 12px; }
.rtk-position-panel dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; }
.rtk-position-panel dl > div { padding: 12px; border-radius: 11px; background: var(--surface, #f5f7f5); }
.rtk-position-panel dt { color: var(--muted); font-size: 11px; font-weight: 700; }
.rtk-position-panel dd { margin: 4px 0 0; overflow-wrap: anywhere; font-weight: 750; }
.rtk-warning-panel ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rtk-warning-panel li { padding: 11px 12px; border-left: 3px solid #c74848; border-radius: 8px; color: #8d2525; background: #fff2f2; font-size: 13px; }
.rtk-clear-state { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; color: #167b37; background: #eef9f1; }
.rtk-clear-state svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.rtk-clear-state span { display: grid; gap: 2px; }
.rtk-clear-state small { color: #548361; }
.rtk-service-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.rtk-service-grid article { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface, #f7f8f7); }
.rtk-service-grid article.failed { border-color: #e5baba; background: #fff3f3; }
.rtk-service-state { display: inline-flex; padding: 3px 7px; border-radius: 999px; color: #177738; background: #e4f5e9; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.rtk-service-grid .failed .rtk-service-state { color: #a52525; background: #f8dede; }
.rtk-service-grid h3 { margin: 12px 0 3px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; }
.rtk-service-grid p { min-height: 31px; margin: 0 0 9px; overflow-wrap: anywhere; color: var(--muted); font-size: 11px; }
.rtk-service-grid button { width: 100%; }
.rtk-logs pre { max-height: 320px; margin: 0; padding: 14px; overflow: auto; border-radius: 12px; color: #dce7df; background: #101914; font: 11px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.rtk-log-order { align-self: center; padding: 6px 10px; border-radius: 999px; color: var(--ok); background: var(--ok-soft); font-size: 11px; font-weight: 800; white-space: nowrap; }
.rtk-server-retained { display: inline-flex; margin-bottom: 7px; padding: 4px 8px; border-radius: 999px; color: #245f93; background: #e7f1fb; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.rtk-incident-list { display: grid; }
.rtk-incident-list article { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 11px; padding: 12px 0; border-top: 1px solid var(--line); }
.rtk-incident-list article:first-child { border-top: 0; }
.rtk-incident-marker { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: #2c669d; box-shadow: 0 0 0 4px #e7f1fb; }
.rtk-incident-list article.warning .rtk-incident-marker { background: #c88700; box-shadow: 0 0 0 4px #f9edc9; }
.rtk-incident-list article.error .rtk-incident-marker { background: #bd3737; box-shadow: 0 0 0 4px #f8dddd; }
.rtk-incident-list article > div { display: grid; gap: 3px; }
.rtk-incident-list small { color: var(--muted); font-size: 11px; }
.rtk-incident-list p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.rtk-retained-logs { padding: 0 !important; overflow: hidden; }
.rtk-retained-logs summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; cursor: pointer; list-style: none; }
.rtk-retained-logs summary::-webkit-details-marker { display: none; }
.rtk-retained-logs summary > span:first-child { display: grid; gap: 3px; }
.rtk-retained-logs summary small { color: var(--muted); font-size: 11px; font-weight: 500; }
.rtk-retained-logs summary > span:last-child { color: var(--ok); font-size: 12px; font-weight: 800; }
.rtk-retained-logs[open] summary > span:last-child { font-size: 0; }
.rtk-retained-logs[open] summary > span:last-child::after { content: "Hide log"; font-size: 12px; }
.rtk-retained-log-list { max-height: 440px; overflow: auto; border-top: 1px solid var(--line); background: #101914; }
.rtk-retained-log-list article { display: grid; grid-template-columns: 145px 115px minmax(0, 1fr); gap: 10px; padding: 7px 12px; border-top: 1px solid #253229; color: #dce7df; font: 10px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; }
.rtk-retained-log-list article:first-child { border-top: 0; }
.rtk-retained-log-list article.warning { background: #2c2818; }
.rtk-retained-log-list article.error { background: #321d1d; }
.rtk-retained-log-list time, .rtk-retained-log-list article > span { color: #8eaa98; }
.rtk-retained-log-list p { margin: 0; overflow-wrap: anywhere; }
.rtk-command-pending { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 14px; border: 1px solid #bcd1e6; border-radius: 12px; background: #eff6fc; }
.rtk-command-pending > div { display: grid; gap: 2px; }
.rtk-command-pending small { color: var(--muted); }
.rtk-controls .danger-outline { width: 100%; min-height: 45px; border: 1px solid #c74848; border-radius: 11px; color: #aa2929; background: transparent; font: inherit; font-weight: 800; }
.rtk-controls .danger-outline:disabled { opacity: .45; }
.rtk-control-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.rtk-command-history > div { display: grid; gap: 0; }
.rtk-command-history article { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.rtk-command-history article:first-child { border-top: 0; }
.rtk-command-history article p { display: grid; gap: 2px; margin: 0; }
.rtk-command-history article small { color: var(--muted); font-size: 11px; }
.rtk-awaiting { display: flex; align-items: center; gap: 14px; }
.rtk-awaiting > span { width: 38px; color: var(--ok); }
.rtk-awaiting svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rtk-awaiting h2 { margin: 0 0 4px; }
.rtk-awaiting p { margin: 0; color: var(--muted); }

html[data-theme="dark"] .rtk-hero { border-color: #315b3b; background: linear-gradient(135deg, #152b1c, #17201a); }
html[data-theme="dark"] .rtk-hero.warning { border-color: #675524; background: linear-gradient(135deg, #2e2816, #17201a); }
html[data-theme="dark"] .rtk-hero.offline { border-color: #673636; background: linear-gradient(135deg, #2e1b1b, #17201a); }
html[data-theme="dark"] .rtk-warning-panel li { color: #f0aaaa; background: #351f1f; }
html[data-theme="dark"] .rtk-clear-state { color: #77d48e; background: #183321; }
html[data-theme="dark"] .rtk-command-pending { border-color: #36546e; background: #192a39; }
html[data-theme="dark"] .rtk-server-retained { color: #8fc4ef; background: #1b3449; }

@media (max-width: 980px) {
  .rtk-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rtk-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .rtk-hero { align-items: stretch; flex-direction: column; padding: 17px; }
  .rtk-hero-meta { justify-items: start; text-align: left; }
  .rtk-metrics { gap: 8px; }
  .rtk-metrics > div { padding: 13px; }
  .rtk-metrics strong { font-size: 22px; }
  .rtk-two-column { grid-template-columns: 1fr; }
  .rtk-service-grid { grid-template-columns: 1fr; }
  .rtk-service-grid article { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
  .rtk-service-grid .rtk-service-state { grid-column: 1; justify-self: start; }
  .rtk-service-grid h3, .rtk-service-grid p { grid-column: 1; min-height: 0; margin: 4px 0 0; }
  .rtk-service-grid button { grid-column: 2; grid-row: 1 / 4; width: auto; }
  .rtk-position-panel dl { grid-template-columns: 1fr; }
  .rtk-logs pre { max-height: 250px; font-size: 10px; }
  .rtk-retained-logs summary { padding: 14px; }
  .rtk-retained-log-list article { grid-template-columns: 1fr auto; gap: 2px 8px; padding: 9px 10px; }
  .rtk-retained-log-list article p { grid-column: 1 / -1; }
}

/* Dashboard visual refresh: compact, light and consistent with the redesigned app. */
.dashboard-page {
  width: min(100%, 1880px);
  gap: 14px;
  margin-inline: auto;
  color: #172033;
}

.app:has(.dashboard-page) > .main { background: #f7f9f8; }

.dashboard-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 2px 2px;
}

.dashboard-heading h1 { margin: 0; color: #162037; font-size: clamp(1.45rem, 2vw, 2rem); letter-spacing: -.025em; }
.dashboard-heading p { margin: 3px 0 0; color: #768196; font-size: .82rem; }
.dashboard-live-status { display: grid; justify-items: end; gap: 5px; }
.dashboard-live-status .status { gap: 7px; border: 0; border-radius: 999px; background: #eaf8ee; color: #23963c; }
.dashboard-live-status .status.warn { background: #fff4db; color: #986a08; }
.dashboard-live-status .status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dashboard-live-status small { color: #8b95a6; font-size: .7rem; }

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-summary-card {
  min-width: 0;
  min-height: 104px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 17px 20px;
  border: 1px solid #e1e7e3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(25, 45, 33, .045);
}

.dashboard-summary-icon,
.daily-completion-grid > div > span,
.dashboard-quick-actions > button > span {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #2aaa48;
  background: #ebf8ee;
}

.dashboard-summary-icon { width: 54px; height: 54px; }
.dashboard-summary-icon svg { width: 27px; height: 27px; }
.dashboard-summary-card > div { min-width: 0; display: grid; gap: 3px; }
.dashboard-summary-card small { color: #738096; font-size: .7rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.dashboard-summary-card strong { color: #111a2d; font-size: clamp(1.55rem, 2vw, 2rem); line-height: 1; }
.dashboard-summary-card span:last-child { color: #768196; font-size: .76rem; }
.dashboard-summary-card span.all-clear { color: #2c9d46; font-weight: 700; }
.dashboard-summary-card span.needs-attention { color: #a36b06; font-weight: 700; }

.dashboard-page .panel {
  border: 1px solid #e1e7e3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(25, 45, 33, .045);
}

.dashboard-page .panel::before { display: none; }
.daily-completion-panel { margin-top: 0; padding: 15px 17px; }
.dashboard-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.dashboard-section-heading h2 { margin: 0; color: #526078; font-size: .72rem; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; }
.dashboard-section-heading span { display: block; margin-top: 4px; color: #7c8799; font-size: .72rem; }
.dashboard-section-heading .ghost { min-height: 32px; border: 1px solid #d8e8dc; color: #287d3c; background: #fff; }

.daily-completion-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.daily-completion-grid > div {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  border: 0;
  border-right: 1px solid #e4e9e6;
  border-radius: 0;
  background: transparent;
}
.daily-completion-grid > div:last-child { border-right: 0; }
.daily-completion-grid > div > span { width: 36px; height: 36px; }
.daily-completion-grid > div > span svg { width: 18px; height: 18px; }
.daily-completion-grid p { min-width: 0; display: grid; gap: 1px; margin: 0; }
.daily-completion-grid small { color: #7b8799; font-size: .7rem; }
.daily-completion-grid strong { color: #172033; font-size: .9rem; }
.daily-completion-grid em { color: #8993a3; font-size: .68rem; font-style: normal; }

.dashboard-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.dashboard-loads-panel,
.dashboard-baling-panel { padding: 14px; background: #fff; }
.dashboard-page .table-wrap { border-color: #e0e6e2; border-radius: 10px; background: #fff; }
.dashboard-page thead { background: #f7f9f8; }
.dashboard-page th { color: #69758a; border-color: #e1e7e3; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }
.dashboard-page td { border-color: #e7ebe8; color: #263146; }
.dashboard-page tbody tr:nth-child(even) { background: #fbfcfb; }
.dashboard-page tbody tr:hover { background: #f1f8f3; }
.dashboard-baling-list { gap: 0; overflow: hidden; border: 1px solid #e0e6e2; border-radius: 10px; }
.dashboard-baling-record { gap: 7px; padding: 11px 13px; border: 0; border-bottom: 1px solid #e7ebe8; border-radius: 0; background: #fff; }
.dashboard-baling-record:last-child { border-bottom: 0; }
.dashboard-baling-record:hover,
.dashboard-baling-record:focus-visible { border-color: #e7ebe8; background: #f1f8f3; }
.dashboard-baling-facts > span { padding: 4px 0; background: transparent; }

.dashboard-quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dashboard-quick-actions > button {
  min-width: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border: 1px solid #e1e7e3;
  border-radius: 14px;
  color: #172033;
  background: #fff;
  box-shadow: 0 5px 18px rgba(25, 45, 33, .04);
  text-align: left;
}
.dashboard-quick-actions > button:hover { border-color: #bcdcc4; background: #f9fcfa; }
.dashboard-quick-actions > button > span { width: 42px; height: 42px; }
.dashboard-quick-actions > button > span svg { width: 21px; height: 21px; }
.dashboard-quick-actions p { min-width: 0; display: grid; gap: 3px; margin: 0; }
.dashboard-quick-actions strong { overflow: hidden; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-quick-actions small { overflow: hidden; color: #7b8799; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-quick-actions i { color: #172033; font-size: 1.5rem; font-style: normal; line-height: 1; }

@media (max-width: 900px) {
  .dashboard-panels { grid-template-columns: 1fr; }
  .dashboard-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .dashboard-heading { align-items: start; }
  .dashboard-live-status small { display: none; }
  .dashboard-stats { grid-template-columns: 1fr; }
  .dashboard-summary-card { min-height: 88px; padding: 13px 15px; }
  .dashboard-summary-icon { width: 46px; height: 46px; }
  .daily-completion-panel { padding: 13px; }
  .daily-completion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-completion-grid > div { padding: 8px; border-right: 0; border-bottom: 1px solid #e4e9e6; }
  .daily-completion-grid > div:nth-last-child(-n + 2) { border-bottom: 0; }
  .dashboard-quick-actions { grid-template-columns: 1fr; gap: 9px; }
  .dashboard-quick-actions > button { min-height: 68px; }
}

.record-preview-launch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.record-preview-launch {
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid #b9dcc0;
  border-radius: 14px;
  background: #eef8f0;
}

.record-preview-launch > div { display: grid; gap: 2px; }
.record-preview-launch small { color: var(--muted); }
.record-preview-launch a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 11px;
  color: #fff;
  background: #238b3a;
  font-weight: 800;
  text-decoration: none;
}

/* Record redesign preview --------------------------------------------------
   Scoped behind ?record-preview=1 so the production Record page is unchanged. */
.record-preview-shell {
  color-scheme: light;
  --bg: #f4f6f8;
  --panel: #ffffff;
  --text: #1d232c;
  --muted: #65707d;
  --line: #dbe0e6;
  --brand: #245f93;
  --brand-2: #347bad;
  --danger: #b23535;
  --warn: #996b00;
  --ok: #247243;
  --info: #2c669d;
  --shadow: 0 12px 30px rgba(27, 39, 53, 0.09);
  --record-green: #24913a;
  --record-green-deep: #18752d;
  --record-green-soft: #eaf6ec;
  --record-amber: #a66d08;
  --record-amber-soft: #fff5df;
  --record-red: #b83d3d;
  --record-red-soft: #fceaea;
  --record-ink: #101827;
  --record-muted: #667085;
  --record-line: #e4e8e6;
  --record-surface: #ffffff;
  --record-radius: 18px;
  --record-shadow: 0 12px 34px rgba(22, 44, 31, 0.09), 0 2px 7px rgba(22, 44, 31, 0.04);
  min-height: 100dvh;
  color: var(--record-ink);
  background: #f7f9f7;
}

.record-preview-shell .app-header {
  border-bottom: 0;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 0 rgba(16, 24, 39, 0.06);
  backdrop-filter: blur(18px);
}

.record-preview-shell .topbar {
  max-width: 1020px;
  margin: 0 auto;
  padding: 14px clamp(16px, 3vw, 26px) 11px;
  background: transparent;
  border-bottom: 0;
}

.record-preview-shell .brand-mark {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(16, 24, 39, 0.14);
}

.record-preview-shell .brand h1 {
  max-width: 190px;
  font-size: 1.04rem;
  line-height: 1.08;
}

.record-preview-shell .brand p,
.record-preview-shell .topbar .status {
  display: none;
}

.record-preview-shell .topbar .button-row {
  flex-wrap: nowrap;
  gap: 7px;
}

.record-preview-shell .topbar button {
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid var(--record-line);
  border-radius: 12px;
  color: var(--record-ink);
  background: #f8faf8;
  font-size: 0.84rem;
  font-weight: 750;
}

.record-preview-shell .topbar .record-preview-header-action {
  width: 42px;
  min-width: 42px;
  padding: 0;
  border: 0;
  color: #101827;
  background: transparent;
}

.record-preview-header-action svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.record-preview-header-action.has-notifications::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--record-green);
}

.record-preview-shell .topbar .record-preview-header-action { position: relative; }
.record-preview-shell .topbar .record-preview-header-action.active { color: #fff; background: var(--record-green); }

.record-preview-admin-menu { position: relative; }
.record-preview-admin-menu-items {
  position: absolute;
  z-index: 1600;
  top: calc(100% + 8px);
  right: 0;
  width: min(440px, calc(100vw - 16px));
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
  padding: 12px;
  border: 1px solid var(--record-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(18, 31, 24, .2);
}
.record-preview-admin-menu.open .record-preview-admin-menu-items { display: grid; }
.record-preview-admin-menu-items .nav-menu-group {
  min-width: 0;
  gap: 3px;
  padding: 8px;
  border: 1px solid #e7ece8;
  border-radius: 11px;
  background: #f8faf8;
}
.record-preview-admin-menu-items .nav-menu-group-title { padding: 1px 7px 4px; }
.record-preview-admin-menu-items .nav-menu-group button {
  width: 100%;
  min-height: 32px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: .78rem;
}

.record-preview-shell .nav {
  max-width: 1020px;
  gap: clamp(5px, 2vw, 18px);
  margin: 0 auto;
  padding: 5px clamp(12px, 3vw, 26px) 11px;
  background: transparent;
  border: 0;
}

.record-preview-shell .nav > button,
.record-preview-shell .nav-menu-trigger {
  min-height: 42px;
  justify-content: center;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--record-muted);
  background: transparent;
  font-size: 0.93rem;
  font-weight: 650;
}

.record-preview-nav-icon {
  width: 20px;
  height: 20px;
  display: inline-grid;
  flex: 0 0 20px;
  place-items: center;
}

.record-preview-nav-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.record-preview-shell .nav > button.active,
.record-preview-shell .nav-menu-trigger.active {
  color: #fff;
  background: linear-gradient(135deg, #32aa48, var(--record-green-deep));
  box-shadow: 0 7px 16px rgba(36, 145, 58, 0.24);
}

/* Touch tablets and phones use the duplicate Manage control in the header. */
@media (hover: none) and (pointer: coarse) {
  .record-preview-shell .nav-menu { display: none; }
}

.record-preview-shell .main {
  width: 100%;
  padding: clamp(12px, 2.5vw, 22px);
}

/* Shared Admin workspace -------------------------------------------------- */
.record-preview-shell .admin-design-page {
  width: min(100%, 1320px);
  display: grid;
  gap: 16px;
  margin: 0 auto;
  padding-bottom: max(22px, env(safe-area-inset-bottom));
}

.record-preview-shell .admin-design-heading {
  min-height: 104px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid rgba(36, 145, 58, .14);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 12%, rgba(36, 145, 58, .11), transparent 34%),
    linear-gradient(135deg, #fff, #f7fbf7);
  box-shadow: var(--record-shadow);
}

.record-preview-shell .admin-design-heading-icon {
  width: 54px;
  height: 54px;
  display: grid;
  flex: 0 0 54px;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #35aa4b, var(--record-green-deep));
  box-shadow: 0 9px 20px rgba(36, 145, 58, .22);
}

.record-preview-shell .admin-design-heading-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.record-preview-shell .admin-design-heading > div { min-width: 0; }
.record-preview-shell .admin-design-heading > div > span {
  display: block;
  margin-bottom: 2px;
  color: var(--record-green-deep);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.record-preview-shell .admin-design-heading h1 {
  margin: 0;
  color: var(--record-ink);
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.08;
}
.record-preview-shell .admin-design-heading p {
  margin: 5px 0 0;
  color: var(--record-muted);
  font-size: .92rem;
}

.record-preview-shell .admin-design-content {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.record-preview-shell .admin-design-content > .panel,
.record-preview-shell .admin-design-content .permission-layout > .panel,
.record-preview-shell .admin-design-content .deployments-sidebar,
.record-preview-shell .admin-design-content .deployment-editor-dock {
  border-color: var(--record-line);
  border-radius: 18px;
  background: var(--record-surface);
  box-shadow: var(--record-shadow);
}

.record-preview-shell .admin-design-content > .panel { padding: clamp(15px, 2.4vw, 22px); }
.record-preview-shell .admin-design-content > .panel + .panel { margin-top: 0 !important; }
.record-preview-shell .admin-design-content .section-title {
  gap: 12px;
  margin-bottom: 15px;
  padding-bottom: 13px;
  border-bottom: 1px solid #edf0ee;
}
.record-preview-shell .admin-design-content .section-title h2 {
  color: var(--record-ink);
  font-size: 1.18rem;
}
.record-preview-shell .admin-design-content .section-title p { color: var(--record-muted); }

.record-preview-shell .admin-design-content .field label,
.record-preview-shell .admin-design-content .new-role-form > label {
  color: #4b5650;
  font-size: .76rem;
  font-weight: 800;
}
.record-preview-shell .admin-design-content input:not([type="checkbox"]):not([type="radio"]),
.record-preview-shell .admin-design-content select,
.record-preview-shell .admin-design-content textarea {
  min-height: 44px;
  border-color: #dce3df;
  border-radius: 11px;
  background: #fff;
}
.record-preview-shell .admin-design-content input:focus,
.record-preview-shell .admin-design-content select:focus,
.record-preview-shell .admin-design-content textarea:focus {
  border-color: #52a963;
  box-shadow: 0 0 0 3px rgba(36, 145, 58, .11);
}

.record-preview-shell .admin-design-content button:not(.link-button):not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out) {
  border-radius: 10px;
}
.record-preview-shell .admin-design-content button.secondary {
  border-color: #268e3b;
  color: #fff;
  background: linear-gradient(135deg, #31a848, var(--record-green-deep));
  box-shadow: 0 5px 12px rgba(36, 145, 58, .15);
}
.record-preview-shell .admin-design-content button.ghost {
  border-color: #d8e1da;
  color: #31573a;
  background: #f8fbf8;
}

.record-preview-shell .admin-design-content .table-wrap {
  border: 1px solid #e1e7e3;
  border-radius: 14px;
  background: #fff;
}
.record-preview-shell .admin-design-content table { margin: 0; }
.record-preview-shell .admin-design-content thead { background: #f0f7f1; }
.record-preview-shell .admin-design-content th {
  color: #52625a;
  font-size: .68rem;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.record-preview-shell .admin-design-content th,
.record-preview-shell .admin-design-content td { border-color: #e9edea; }
.record-preview-shell .admin-design-content tbody tr:hover { background: #fbfdfb; }

.record-preview-shell .admin-design-content .detail-box,
.record-preview-shell .admin-design-content .metric,
.record-preview-shell .admin-design-content .permission-group,
.record-preview-shell .admin-design-content .recycle-bin-list article {
  border-color: #e2e8e4;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, #f9fbf9);
}

/* Vehicles --------------------------------------------------------------- */
.vehicle-design-page {
  display: grid;
  gap: 14px;
}

.vehicle-design-overview {
  min-width: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
  padding: 15px;
  border: 1px solid var(--record-line);
  border-radius: 18px;
  background: var(--record-surface);
  box-shadow: var(--record-shadow);
}

.vehicle-design-metrics {
  min-width: 0;
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
}

.vehicle-design-metrics article {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 2px 18px;
  border-right: 1px solid #e7ece8;
}

.vehicle-design-metrics article:first-child { padding-left: 5px; }
.vehicle-design-metrics article:last-child { border-right: 0; }
.vehicle-design-metrics strong { color: var(--record-ink); font-size: 1.38rem; line-height: 1; }
.vehicle-design-metrics span { color: var(--record-muted); font-size: .72rem; font-weight: 700; }

.record-preview-shell .admin-design-content .vehicle-design-add {
  min-width: 165px;
  min-height: 50px;
  align-self: center;
  gap: 8px;
  white-space: nowrap;
}

.vehicle-design-add > span { font-size: 1.45rem; font-weight: 400; line-height: 1; }

.vehicle-design-fleet {
  min-width: 0;
  padding: clamp(15px, 2.4vw, 22px);
  border: 1px solid var(--record-line);
  border-radius: 18px;
  background: var(--record-surface);
  box-shadow: var(--record-shadow);
}

.vehicle-design-fleet > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

.vehicle-design-fleet > header > div > span {
  color: var(--record-green-deep);
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vehicle-design-fleet h2 { margin: 2px 0 0; color: var(--record-ink); font-size: 1.22rem; }
.vehicle-design-count {
  min-width: 34px;
  min-height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #1f7d34;
  background: #e9f6ec;
  font-size: .78rem;
  font-weight: 850;
}

.vehicle-design-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.vehicle-design-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dfe6e1;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff, #fbfdfb);
}

.vehicle-design-card > header {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border-bottom: 1px solid #edf0ee;
}

.vehicle-design-card-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #248b3a;
  background: #e7f5ea;
}

.vehicle-design-card-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.vehicle-design-card > header > div { min-width: 0; }
.vehicle-design-card > header > div > span { display: block; color: #647169; font-size: .67rem; font-weight: 850; letter-spacing: .055em; }
.vehicle-design-card h3 { margin: 2px 0 0; overflow: hidden; color: var(--record-ink); font-size: 1rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.vehicle-design-type { padding: 6px 9px; border-radius: 999px; color: #257d37; background: #e9f6ec; font-size: .65rem; font-weight: 800; }
.vehicle-design-card.is-general .vehicle-design-card-icon { color: #526078; background: #edf1f4; }
.vehicle-design-card.is-general .vehicle-design-type { color: #526078; background: #edf1f4; }

.vehicle-design-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 12px 14px;
}

.vehicle-design-facts > div { min-width: 0; padding: 2px 11px; border-left: 1px solid #e8ece9; }
.vehicle-design-facts > div:first-child { padding-left: 0; border-left: 0; }
.vehicle-design-facts small { display: block; margin-bottom: 3px; color: var(--record-muted); font-size: .64rem; }
.vehicle-design-facts strong { display: block; overflow: hidden; color: #26332b; font-size: .78rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.vehicle-design-assigned { grid-column: span 1; }

.vehicle-design-card > footer { border-top: 1px solid #edf0ee; }
.record-preview-shell .admin-design-content .vehicle-design-edit {
  width: 100%;
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  color: #2b6737;
  background: #fbfdfb;
  font-size: .75rem;
  font-weight: 800;
}
.vehicle-design-edit i { font-size: 1.35rem; font-style: normal; font-weight: 400; }

.vehicle-design-empty {
  min-height: 250px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 28px;
  border: 1px dashed #ccd8cf;
  border-radius: 15px;
  text-align: center;
}
.vehicle-design-empty > span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; color: #2a8d3e; background: #e9f6ec; }
.vehicle-design-empty svg { width: 26px; height: 26px; fill: none; stroke: currentColor; }
.vehicle-design-empty h3 { margin: 2px 0 0; color: var(--record-ink); }
.vehicle-design-empty p { max-width: 340px; margin: 0 0 8px; color: var(--record-muted); font-size: .82rem; }

body:has(.vehicle-editor-modal) { overflow: hidden; }
.vehicle-editor-modal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 20px; }
.vehicle-editor-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: rgba(8, 18, 11, .56); backdrop-filter: blur(3px); }
.vehicle-editor-sheet {
  position: relative;
  width: min(100%, 720px);
  max-height: min(88dvh, 820px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #dce5df;
  border-radius: 22px;
  background: #f7f9f7;
  box-shadow: 0 28px 70px rgba(4, 16, 8, .28);
}

.vehicle-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 17px;
  border-bottom: 1px solid #e2e8e4;
  background: #fff;
}
.vehicle-editor-head > div > span { display: block; margin-bottom: 3px; color: #268a3b; font-size: .67rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.vehicle-editor-head h2 { margin: 0; color: var(--record-ink); font-size: 1.42rem; line-height: 1.12; }
.vehicle-editor-head p { margin: 5px 0 0; color: var(--record-muted); font-size: .78rem; }
.record-preview-shell .admin-design-content .vehicle-editor-close { width: 38px; height: 38px; min-height: 38px; flex: 0 0 38px; padding: 0; border: 1px solid #dfe6e1; border-radius: 50%; color: #58645d; background: #f7f9f7; font-size: 1.55rem; font-weight: 350; line-height: 1; }

.vehicle-editor-body { min-height: 0; display: grid; gap: 12px; overflow-y: auto; padding: 14px; overscroll-behavior: contain; }
.vehicle-editor-section { padding: 15px; border: 1px solid #e0e7e2; border-radius: 16px; background: #fff; }
.vehicle-editor-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.vehicle-editor-section-title > span { width: 36px; height: 36px; display: grid; flex: 0 0 36px; place-items: center; border-radius: 11px; color: #288d3d; background: #e9f6ec; }
.vehicle-editor-section-title svg { width: 20px; height: 20px; fill: none; stroke: currentColor; }
.vehicle-editor-section-title strong { display: block; color: var(--record-ink); font-size: .86rem; }
.vehicle-editor-section-title small { display: block; margin-top: 2px; color: var(--record-muted); font-size: .68rem; }
.vehicle-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vehicle-editor-assignment { grid-column: 1 / -1; }
.vehicle-editor-spreading { padding-top: 10px; }
.vehicle-editor-spreading > .vehicle-spreading-toggle { min-height: 54px; margin-bottom: 13px; padding: 4px 2px 13px; border-bottom: 1px solid #edf0ee; }
.vehicle-editor-spreading > .vehicle-spreading-toggle > span { display: grid; gap: 2px; }
.vehicle-editor-spreading > .vehicle-spreading-toggle strong { color: var(--record-ink); font-size: .86rem; }
.vehicle-editor-spreading > .vehicle-spreading-toggle small { color: var(--record-muted); font-size: .68rem; font-weight: 600; }
.vehicle-editor-quantity { grid-column: 1 / -1; }
.vehicle-editor-quantity > small { display: block; margin-top: 5px; color: var(--record-muted); font-size: .65rem; }
.vehicle-editor-quantity input[readonly] { color: #1f7d34; background: #eff7f1; font-weight: 850; }

.vehicle-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid #dfe6e1;
  background: #fff;
}
.vehicle-editor-actions > div { display: flex; justify-content: flex-end; gap: 9px; margin-left: auto; }
.record-preview-shell .admin-design-content .vehicle-editor-actions button { min-height: 44px; }
.record-preview-shell .admin-design-content .vehicle-editor-delete { color: #a93232; border-color: #efd1d1; background: #fff7f7; }

@media (max-width: 760px) {
  .vehicle-design-overview { display: grid; gap: 12px; padding: 13px; }
  .vehicle-design-metrics article { padding: 2px 12px; }
  .vehicle-design-metrics article:first-child { padding-left: 2px; }
  .record-preview-shell .admin-design-content .vehicle-design-add { width: 100%; min-height: 48px; }
  .vehicle-design-grid { grid-template-columns: 1fr; }
  .vehicle-editor-modal { align-items: end; padding: 0; }
  .vehicle-editor-sheet { width: 100%; max-height: calc(100dvh - max(22px, env(safe-area-inset-top))); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 22px 22px 0 0; }
}

@media (max-width: 520px) {
  .record-preview-shell .admin-design-vehicles .admin-design-heading { min-height: 78px; }
  .vehicle-design-page { gap: 10px; }
  .vehicle-design-overview { border-radius: 15px; }
  .vehicle-design-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vehicle-design-metrics article { padding: 1px 8px; }
  .vehicle-design-metrics strong { font-size: 1.2rem; }
  .vehicle-design-metrics span { font-size: .62rem; }
  .vehicle-design-fleet { padding: 13px; border-radius: 15px; }
  .vehicle-design-fleet > header { margin-bottom: 11px; }
  .vehicle-design-card > header { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 9px; padding: 12px; }
  .vehicle-design-card-icon { width: 42px; height: 42px; border-radius: 12px; }
  .vehicle-design-card h3 { font-size: .92rem; }
  .vehicle-design-type { padding: 5px 7px; font-size: .59rem; }
  .vehicle-design-facts { padding: 11px 12px; }
  .vehicle-design-facts > div { padding-inline: 8px; }
  .vehicle-design-facts small { font-size: .59rem; }
  .vehicle-design-facts strong { font-size: .71rem; }
  .vehicle-editor-head { padding: 15px 15px 13px; }
  .vehicle-editor-head h2 { font-size: 1.22rem; }
  .vehicle-editor-head p { max-width: 280px; font-size: .7rem; line-height: 1.3; }
  .vehicle-editor-body { gap: 9px; padding: 10px; }
  .vehicle-editor-section { padding: 13px; border-radius: 14px; }
  .vehicle-editor-grid { grid-template-columns: 1fr; gap: 10px; }
  .vehicle-editor-assignment,
  .vehicle-editor-quantity { grid-column: auto; }
  .vehicle-editor-actions { align-items: stretch; padding: 10px 10px max(10px, env(safe-area-inset-bottom)); }
  .vehicle-editor-actions > div { flex: 1 1 auto; }
  .vehicle-editor-actions > div > button { flex: 1 1 0; padding-inline: 10px; }
  .record-preview-shell .admin-design-content .vehicle-editor-delete { min-width: 46px; max-width: 76px; padding: 0 8px; font-size: .66rem; }
}

.record-preview-shell .admin-design-deployments {
  width: 100%;
  min-height: calc(100dvh - 180px);
  grid-template-rows: auto minmax(0, 1fr);
}
.record-preview-shell .admin-design-deployments .admin-design-content,
.record-preview-shell .admin-design-deployments .deployments-hub { min-height: 0; height: 100%; }

.record-preview-shell .user-create-panel { padding: 0 !important; overflow: hidden; }
.record-preview-shell .user-create-panel > summary,
.record-preview-shell .permissions-advanced > summary {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
}
.record-preview-shell .user-create-panel > summary::-webkit-details-marker,
.record-preview-shell .permissions-advanced > summary::-webkit-details-marker { display: none; }
.record-preview-shell .user-create-panel > summary > span,
.record-preview-shell .permissions-advanced > summary > span {
  width: 42px;
  height: 42px;
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 12px;
  color: var(--record-green-deep);
  background: var(--record-green-soft);
}
.record-preview-shell .user-create-panel > summary svg,
.record-preview-shell .permissions-advanced > summary svg,
.record-preview-shell .access-bundle-grid svg,
.record-preview-shell .advanced-profile-note svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.record-preview-shell .user-create-panel > summary div,
.record-preview-shell .permissions-advanced > summary div { display: grid; gap: 2px; }
.record-preview-shell .user-create-panel > summary strong,
.record-preview-shell .permissions-advanced > summary strong { color: var(--record-ink); font-size: 1rem; }
.record-preview-shell .user-create-panel > summary small,
.record-preview-shell .permissions-advanced > summary small { color: var(--record-muted); }
.record-preview-shell .user-create-panel[open] > summary { border-bottom: 1px solid var(--record-line); }
.record-preview-shell .user-create-panel > form { padding: 18px; }

.user-form-work-areas { display: grid; gap: 10px; margin: 16px 0; }
.user-form-work-areas h3,
.user-work-area-section h3,
.user-vehicle-section h3 { margin: 0; font-size: .9rem; }
.user-form-work-areas p,
.user-work-area-section p,
.user-vehicle-section p { margin: 2px 0 0; color: var(--record-muted); font-size: .78rem; }
.user-create-actions { display: flex; justify-content: flex-end; margin-top: 16px; }

.tablet-login-management { margin-top: 14px; }
.tablet-login-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tablet-login-editor { overflow: hidden; border: 1px solid #e1e7e3; border-radius: 14px; background: #fff; }
.tablet-login-editor > summary { min-height: 58px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.tablet-login-editor > summary::-webkit-details-marker { display: none; }
.tablet-login-editor > summary svg { width: 22px; height: 22px; fill: none; stroke: var(--record-green); stroke-width: 1.8; }
.tablet-login-editor > summary span { min-width: 0; display: grid; gap: 2px; }
.tablet-login-editor > summary strong { color: var(--record-ink); font-size: .88rem; }
.tablet-login-editor > summary small { color: var(--record-muted); font-size: .7rem; }
.tablet-login-editor > summary i { color: var(--record-muted); font-size: 1.2rem; font-style: normal; transition: transform .16s ease; }
.tablet-login-editor[open] > summary i { transform: rotate(90deg); }
.tablet-login-editor > form { display: grid; gap: 10px; padding: 12px; border-top: 1px solid #edf1ee; background: #fafcfb; }
.tablet-login-editor > form .field { margin: 0; }
.tablet-login-editor > form button { justify-self: end; }

@media (max-width: 760px) {
  .tablet-login-list { grid-template-columns: 1fr; }
}

.user-access-list { display: grid; gap: 8px; }
.user-access-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e1e7e3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 9px rgba(22, 44, 31, .035);
}
.user-access-card.disabled { opacity: .7; }
.user-access-card > summary {
  min-height: 68px;
  display: grid;
  grid-template-columns: 42px minmax(150px, .7fr) minmax(260px, 1.3fr) auto 22px;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: #fbfdfb;
  cursor: pointer;
  list-style: none;
}
.user-access-card > summary::-webkit-details-marker { display: none; }
.user-access-card > summary:hover { background: #f5faf6; }
.user-access-card > summary:focus-visible { outline: 3px solid rgba(36, 145, 58, .18); outline-offset: -3px; }
.user-access-card[open] > summary { background: #f5faf6; }
.user-access-expanded { border-top: 1px solid #e5ebe7; }
.user-access-chevron {
  color: #718078;
  font-size: 1.45rem;
  font-style: normal;
  line-height: 1;
  transition: transform .16s ease;
}
.user-access-card[open] .user-access-chevron { transform: rotate(90deg); }
.user-access-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, #3baa51, var(--record-green-deep));
  font-weight: 900;
}
.user-access-identity { min-width: 0; display: grid; gap: 2px; }
.user-access-identity strong { overflow: hidden; color: var(--record-ink); text-overflow: ellipsis; white-space: nowrap; }
.user-access-identity small { overflow: hidden; color: var(--record-muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.user-access-row-facts { min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; }
.user-access-row-facts span {
  min-width: 0;
  overflow: hidden;
  padding: 5px 8px;
  border-radius: 999px;
  color: #53635a;
  background: #edf3ef;
  font-size: .7rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-access-body { display: grid; gap: 15px; padding: 16px; }
.user-access-profile { margin: 0; }
.user-access-profile > strong { display: block; padding: 7px 0; font-size: .88rem; }
.user-work-area-section { display: grid; gap: 9px; }

.work-area-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.work-area-choice {
  position: relative;
  min-width: 0;
  min-height: 94px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-content: start;
  gap: 9px;
  padding: 11px;
  border: 1px solid #dfe5e1;
  border-radius: 13px;
  background: #fff;
  cursor: pointer;
}
.work-area-choice.selected { border-color: #7cbe88; background: #f1f8f2; box-shadow: inset 0 0 0 1px rgba(36, 145, 58, .08); }
.work-area-choice.locked { cursor: default; }
.work-area-choice-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #55705d;
  background: #eef2ef;
}
.work-area-choice.selected .work-area-choice-icon { color: var(--record-green-deep); background: #dff0e2; }
.work-area-choice-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.work-area-choice > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.work-area-choice strong { color: var(--record-ink); font-size: .78rem; line-height: 1.15; }
.work-area-choice small { color: var(--record-muted); font-size: .65rem; line-height: 1.25; }
.work-area-choice input { position: absolute; opacity: 0; pointer-events: none; }
.work-area-choice i {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 19px;
  height: 19px;
  border: 1px solid #cfd8d2;
  border-radius: 999px;
  background: #fff;
}
.work-area-choice input:checked + i { border-color: var(--record-green); background: var(--record-green); }
.work-area-choice input:checked + i::after { content: "✓"; display: grid; place-items: center; color: #fff; font-size: .7rem; font-style: normal; font-weight: 900; }
.work-area-choice:has(input:focus-visible) { outline: 3px solid rgba(36, 145, 58, .18); outline-offset: 2px; }

.user-vehicle-section { display: grid; gap: 9px; padding-top: 13px; border-top: 1px solid #edf0ee; }
.user-access-expanded > footer { display: flex; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid #edf0ee; background: #fbfcfb; }
.vehicle-assignment-editor { display: grid; gap: 10px; }
.assigned-vehicle-list { display: flex; flex-wrap: wrap; gap: 7px; }
.assigned-vehicle-list label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #cfe2d3;
  border-radius: 10px;
  background: #f3f9f4;
  cursor: pointer;
}
.assigned-vehicle-list input { position: absolute; opacity: 0; pointer-events: none; }
.assigned-vehicle-list span { color: #274630; font-size: .78rem; font-weight: 750; }
.assigned-vehicle-list i { color: #a33b3b; font-size: .68rem; font-style: normal; font-weight: 800; }
.assigned-vehicle-list label:hover { border-color: #e0a9a9; background: #fff6f6; }
.assigned-vehicle-list label:has(input:focus-visible) { outline: 3px solid rgba(36, 145, 58, .18); outline-offset: 2px; }
.vehicle-assignment-empty,
.vehicle-assignment-complete { color: var(--record-muted); font-size: .76rem; }
.vehicle-assignment-add { width: min(100%, 420px); display: grid; gap: 5px; }
.vehicle-assignment-add > span { color: #405048; font-size: .75rem; font-weight: 800; }
.vehicle-assignment-add select { width: 100%; min-height: 40px; }
.advanced-profile-note { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #e1e7e3; border-radius: 12px; background: #f8faf8; color: #52625a; }
.advanced-profile-note > span { display: grid; gap: 2px; }
.advanced-profile-note small { color: var(--record-muted); font-size: .72rem; }

.access-bundle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.access-bundle-grid article { display: flex; gap: 11px; padding: 14px; border: 1px solid #e0e7e2; border-radius: 14px; background: linear-gradient(145deg, #fff, #f8fbf8); }
.access-bundle-grid article > span { width: 38px; height: 38px; display: grid; flex: 0 0 38px; place-items: center; border-radius: 11px; color: var(--record-green-deep); background: var(--record-green-soft); }
.access-bundle-grid article > div { display: grid; gap: 3px; }
.access-bundle-grid p { margin: 0; color: var(--record-muted); font-size: .75rem; line-height: 1.3; }
.access-bundle-grid small { color: var(--record-green-deep); font-size: .66rem; font-weight: 800; }

.record-preview-shell .permissions-advanced { padding: 0 !important; overflow: hidden; }
.record-preview-shell .permissions-advanced > summary > i { margin-left: auto; font-size: 1.3rem; font-style: normal; transition: transform .18s ease; }
.record-preview-shell .permissions-advanced[open] > summary { border-bottom: 1px solid var(--record-line); }
.record-preview-shell .permissions-advanced[open] > summary > i { transform: rotate(180deg); }
.permissions-advanced-body { display: grid; gap: 12px; padding: 14px; }
.permissions-advanced-body .permission-layout { margin: 0; }

@media (max-width: 820px) {
  .user-access-card > summary {
    grid-template-columns: 42px minmax(0, 1fr) auto 22px;
    row-gap: 5px;
  }
  .user-access-avatar { grid-row: 1 / span 2; }
  .user-access-row-facts { grid-column: 2 / 4; grid-row: 2; }
  .user-access-card > summary > .status { grid-column: 3; grid-row: 1; }
  .user-access-chevron { grid-column: 4; grid-row: 1 / span 2; }
}

@media (max-width: 560px) {
  .record-preview-shell .user-create-panel > summary,
  .record-preview-shell .permissions-advanced > summary { min-height: 66px; padding: 11px 12px; }
  .record-preview-shell .user-create-panel > form { padding: 12px; }
  .work-area-choices { grid-template-columns: 1fr; }
  .work-area-choice { min-height: 70px; grid-template-columns: 32px minmax(0, 1fr); padding: 9px 38px 9px 9px; }
  .access-bundle-grid { grid-template-columns: 1fr; }
  .user-access-card > summary { grid-template-columns: 38px minmax(0, 1fr) auto 18px; gap: 8px; padding: 10px; }
  .user-access-avatar { width: 38px; height: 38px; border-radius: 11px; }
  .user-access-row-facts { grid-column: 2 / 4; }
  .user-access-row-facts span { max-width: 145px; padding: 4px 7px; }
  .user-access-row-facts span:nth-child(n + 3) { display: none; }
  .user-access-body { padding: 11px; }
  .permissions-advanced-body { padding: 10px; }
  .permissions-advanced-body .permission-layout { gap: 9px; }
}

.record-preview {
  width: min(100%, 930px);
  display: grid;
  gap: 14px;
  margin: 0 auto;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}

.record-preview svg {
  width: 1.35em;
  height: 1.35em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.record-preview-location {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(31, 92, 48, 0.1);
  border-radius: 24px;
  background: var(--record-surface);
  box-shadow: var(--record-shadow);
}

.record-preview-contours {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.72;
  background:
    repeating-radial-gradient(ellipse at 14% 30%, transparent 0 31px, rgba(43, 142, 69, 0.055) 32px 33px, transparent 34px 51px),
    repeating-radial-gradient(ellipse at 87% 20%, transparent 0 42px, rgba(43, 142, 69, 0.045) 43px 44px, transparent 45px 66px),
    linear-gradient(180deg, rgba(249, 253, 249, 0.86), rgba(255, 255, 255, 0.96));
}

.record-preview-location.warning .record-preview-contours {
  background:
    repeating-radial-gradient(ellipse at 14% 30%, transparent 0 31px, rgba(166, 109, 8, 0.06) 32px 33px, transparent 34px 51px),
    linear-gradient(180deg, #fffdfa, #fff);
}

.record-preview-location.blocked .record-preview-contours {
  background:
    repeating-radial-gradient(ellipse at 14% 30%, transparent 0 31px, rgba(184, 61, 61, 0.055) 32px 33px, transparent 34px 51px),
    linear-gradient(180deg, #fffafa, #fff);
}

.record-preview-location-main {
  display: grid;
  justify-items: center;
  padding: clamp(23px, 5vw, 38px) 18px 18px;
  text-align: center;
}

.record-preview-pin,
.record-preview-ready svg,
.record-preview-status-icon {
  display: grid;
  place-items: center;
  color: var(--record-green);
}

.record-preview-pin {
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(145deg, #35ad4b, var(--record-green-deep));
  box-shadow: 0 9px 20px rgba(36, 145, 58, 0.25);
}

.record-preview-location.warning .record-preview-pin {
  background: linear-gradient(145deg, #d99b28, var(--record-amber));
  box-shadow: 0 9px 20px rgba(166, 109, 8, 0.2);
}

.record-preview-location.blocked .record-preview-pin {
  background: linear-gradient(145deg, #d85a5a, var(--record-red));
  box-shadow: 0 9px 20px rgba(184, 61, 61, 0.18);
}

.record-preview-pin svg {
  width: 25px;
  height: 25px;
}

.record-preview-location h1 {
  max-width: 780px;
  margin: 0;
  color: var(--record-ink);
  font-size: clamp(1.85rem, 7vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.record-preview-acreage {
  margin-top: 9px;
  color: var(--record-green-deep);
  font-size: clamp(1.55rem, 6vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.025em;
}

.record-preview-location.warning .record-preview-acreage { color: var(--record-amber); }
.record-preview-location.blocked .record-preview-acreage { color: var(--record-red); }

.record-preview-location-main > p {
  margin: 10px 0 0;
  color: var(--record-muted);
  font-size: clamp(0.95rem, 3.6vw, 1.14rem);
}

.record-preview-ready {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--record-green-deep);
  background: rgba(232, 247, 235, 0.78);
}

.record-preview-ready svg {
  width: 21px;
  height: 21px;
}

.record-preview-location.warning .record-preview-ready {
  color: var(--record-amber);
  background: var(--record-amber-soft);
}

.record-preview-location.blocked .record-preview-ready {
  color: var(--record-red);
  background: var(--record-red-soft);
}

.record-preview-updated {
  margin-top: 7px;
  color: #8a938f;
  font-size: 0.72rem;
}

.record-preview-change {
  margin-top: 11px;
}

.record-preview-change button,
.record-preview-location .location-request-button {
  min-height: 39px;
  border: 1px solid var(--record-line);
  border-radius: 11px;
  color: var(--record-ink);
  background: rgba(255, 255, 255, 0.86);
  font-weight: 720;
}

.record-preview-location .location-request-button {
  width: min(100%, 430px);
  margin-top: 12px;
  justify-self: center;
}

.record-preview-location .deployment-override {
  width: min(100%, 430px);
  max-width: none;
  justify-self: stretch;
  text-align: left;
}

.record-preview-statuses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 13px 10px 14px;
  border-top: 1px solid rgba(31, 92, 48, 0.09);
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(5px);
}

.record-preview-statuses > div {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 1px 10px;
  border-right: 1px solid var(--record-line);
}

.record-preview-statuses > div:last-child { border-right: 0; }

.record-preview-status-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid #dfe8e1;
  border-radius: 999px;
  background: #fbfdfb;
}

.record-preview-statuses .warning .record-preview-status-icon { color: var(--record-amber); background: var(--record-amber-soft); }

.record-preview-statuses p {
  min-width: 0;
  margin: 0;
  line-height: 1.08;
}

.record-preview-statuses small,
.record-preview-statuses strong {
  display: block;
  white-space: nowrap;
}

.record-preview-statuses small {
  margin-bottom: 4px;
  color: var(--record-muted);
  font-size: 0.72rem;
  font-weight: 550;
}

.record-preview-statuses strong {
  color: var(--record-ink);
  font-size: 0.94rem;
}

.record-preview-vehicle,
.record-preview-activity {
  border: 1px solid var(--record-line);
  border-radius: var(--record-radius);
  background: var(--record-surface);
  box-shadow: var(--record-shadow);
}

.record-preview-vehicle {
  display: grid;
  gap: 7px;
  padding: 13px 16px 14px;
}

.record-preview-vehicle-label {
  color: var(--record-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.record-preview-vehicle-control {
  min-height: 70px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--record-line);
  border-radius: 14px;
  background: #fbfcfb;
}

.record-preview-vehicle-control img {
  width: 58px;
  height: 58px;
  border-radius: 11px;
  object-fit: cover;
}

.record-preview-vehicle-control > div { min-width: 0; }

.record-preview-vehicle-picker { position: relative; min-width: 0; }
.record-preview-vehicle-details,
.record-preview-change-vehicle { display: none; }
.record-preview-vehicle-trigger {
  width: 100%; min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center; gap: 8px; padding: 0; border: 0; color: var(--record-ink);
  background: transparent; text-align: left;
}
.record-preview-vehicle-trigger strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-preview-vehicle-trigger > span { font-size: 1.35rem; text-align: center; transition: transform .16s ease; }
.record-preview-vehicle-trigger[aria-expanded="true"] > span { transform: rotate(180deg); }
.record-preview-vehicle-options {
  position: absolute; z-index: 45; top: calc(100% + 7px); right: 0; left: 0; max-height: min(280px, 45vh);
  overflow-y: auto; padding: 6px; border: 1px solid #dce5df; border-radius: 13px;
  background: #fff; box-shadow: 0 14px 36px rgba(22, 44, 31, .18); overscroll-behavior: contain;
}
.record-preview-vehicle-options[hidden] { display: none; }
.record-preview-vehicle-options button {
  width: 100%; min-height: 44px; display: grid; grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 9px;
  color: var(--record-ink); background: transparent; text-align: left; font-weight: 750;
}
.record-preview-vehicle-options button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-preview-vehicle-options button + button { border-top: 1px solid #eef2ef; }
.record-preview-vehicle-options button[aria-selected="true"] { color: var(--record-green-deep); background: var(--record-green-soft); }
.record-preview-vehicle-options svg { width: 18px; height: 18px; }

.record-preview-vehicle-control strong,
.record-preview-vehicle-control select {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 5px;
  border: 0;
  color: var(--record-ink);
  background: transparent;
  font-size: clamp(0.96rem, 4vw, 1.14rem);
  font-weight: 780;
  overflow: hidden;
  text-overflow: ellipsis;
}

.record-preview-record {
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 12px 18px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #35ad49, var(--record-green-deep));
  box-shadow: 0 12px 24px rgba(32, 130, 52, 0.25);
  font-size: clamp(1.08rem, 4vw, 1.28rem);
  font-weight: 850;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.record-preview-record > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--record-green-deep);
  background: #fff;
}

.record-preview-record:disabled {
  opacity: 1;
  color: #f7f8f8;
  background: #9eaaa4;
  box-shadow: none;
}

.record-preview-record:disabled > span { color: #7f8c86; }

.record-preview-block-reason {
  margin: -4px 10px 0;
  color: var(--record-red);
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.35;
  text-align: center;
}

.record-preview-block-reason.warning { color: var(--record-amber); }

.record-preview-activity {
  overflow: hidden;
  padding: 14px 14px 12px;
}

.record-preview-activity > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 3px 10px;
}

.record-preview-activity h2 {
  margin: 0;
  color: var(--record-ink);
  font-size: clamp(1.12rem, 4.6vw, 1.38rem);
  letter-spacing: -0.02em;
}

.record-preview-activity > header > span {
  min-width: 36px;
  min-height: 36px;
  display: grid;
  padding: 0 9px;
  place-items: center;
  border-radius: 999px;
  color: var(--record-green-deep);
  background: var(--record-green-soft);
  font-weight: 850;
}

.record-preview-timeline {
  position: relative;
  display: grid;
}

.record-preview-timeline::before {
  content: "";
  position: absolute;
  top: 27px;
  bottom: 27px;
  left: 9px;
  width: 1px;
  background: #62bc70;
}

.record-preview-event {
  position: relative;
  display: grid;
  grid-template-columns: 20px 88px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  min-height: 65px;
  padding: 8px 0;
  border-bottom: 0;
}

.record-preview-event:last-child { border-bottom: 0; }

.record-preview-dot {
  z-index: 1;
  width: 10px;
  height: 10px;
  margin-left: 4px;
  border: 2px solid var(--record-green-deep);
  border-radius: 999px;
  background: #65c575;
  box-shadow: 0 0 0 3px #fff;
}

.record-preview-event-time {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.record-preview-event-time strong {
  color: var(--record-ink);
  font-size: 0.94rem;
}

.record-preview-event-time .event-gap {
  margin: 0;
  color: #929b98;
  font-size: 0.72rem;
}

.record-preview-event-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.record-preview-event-copy strong,
.record-preview-event-copy span,
.record-preview-event-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-preview-event-copy strong {
  color: var(--record-ink);
  font-size: 0.9rem;
  font-weight: 760;
}

.record-preview-event-copy span {
  color: var(--record-muted);
  font-size: 0.8rem;
}

.record-preview-event-copy small {
  color: #89928e;
  font-size: 0.68rem;
}

.record-preview-event-action {
  display: grid;
  justify-items: end;
}

.record-preview-event-action .load-remove-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
}

.record-preview-empty {
  padding: 24px 12px;
  border-top: 1px solid var(--record-line);
  color: var(--record-muted);
  text-align: center;
}

.record-preview-secondary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--record-line);
}

.record-preview-secondary-actions button {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--record-line);
  border-radius: 13px;
  color: #34423b;
  background: #fafcfb;
  font-size: 0.84rem;
  font-weight: 650;
}

.record-preview-secondary-actions svg {
  width: 20px;
  height: 20px;
}

.record-preview-sheet-backdrop {
  position: fixed;
  z-index: 2200;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px 18px 0;
  background: rgba(12, 20, 16, 0.58);
  backdrop-filter: blur(3px);
}

.record-preview-sheet {
  position: relative;
  width: min(100%, 560px);
  max-height: min(88dvh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 31px 28px max(22px, env(safe-area-inset-bottom));
  border-radius: 25px 25px 0 0;
  background: #fff;
  box-shadow: 0 -16px 50px rgba(10, 28, 17, 0.2);
}

.record-preview-sheet-handle {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 52px;
  height: 5px;
  border-radius: 999px;
  background: #d7dcda;
  transform: translateX(-50%);
}

.record-preview-sheet-close {
  position: absolute;
  z-index: 1;
  top: 21px;
  right: 22px;
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--record-green-deep);
  background: transparent;
  font-size: 1.75rem;
  font-weight: 350;
  line-height: 1;
}

.record-preview-sheet-heading {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding-right: 45px;
}

.record-preview-sheet-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--record-green-deep);
  background: var(--record-green-soft);
}

.record-preview-sheet-icon svg { width: 27px; height: 27px; }
.record-preview-sheet-heading h2 { margin: 0; color: var(--record-ink); font-size: 1.35rem; letter-spacing: -0.025em; }
.record-preview-sheet-heading p { margin: 5px 0 0; color: var(--record-muted); font-size: 0.88rem; line-height: 1.35; }

.record-preview-sheet-form {
  display: grid;
  gap: 17px;
  margin-top: 23px;
}

.record-preview-sheet-form .field { min-width: 0; gap: 7px; }
.record-preview-sheet-form .field > label { color: #465049; font-size: 0.78rem; font-weight: 780; }
.record-preview-sheet-form input,
.record-preview-sheet-form select,
.record-preview-sheet-form textarea {
  min-height: 52px;
  border: 1px solid #dce2df;
  border-radius: 12px;
  color: var(--record-ink);
  background: #fff;
  font-size: 1rem;
}

.record-preview-sheet-form textarea { min-height: 76px; resize: vertical; }
.record-preview-sheet-form .missed-load-datetime { gap: 13px; }
.record-preview-sheet-form .missed-load-datetime input[type="date"],
.record-preview-sheet-form .missed-load-datetime input[type="time"] {
  min-height: 52px;
  padding: 0 13px;
  color: var(--record-ink);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
}
.record-preview-sheet-form .missed-load-datetime input[type="date"]::-webkit-date-and-time-value,
.record-preview-sheet-form .missed-load-datetime input[type="time"]::-webkit-date-and-time-value {
  min-height: 100%;
  display: flex;
  align-items: center;
  padding: 0;
  color: var(--record-ink);
  font: inherit;
  text-align: left;
}
.record-preview-sheet-form .missed-destination-results { z-index: 4; max-height: min(38dvh, 310px); }

.record-preview-minutes { position: relative; }
.record-preview-minutes input { width: 100%; padding-right: 48px; }
.record-preview-minutes > span { position: absolute; top: 50%; right: 16px; color: #5f6964; font-size: 0.86rem; transform: translateY(-50%); }

.record-preview-sheet-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  padding: 14px;
  border: 1px solid #dcecdf;
  border-radius: 12px;
  color: #31443a;
  background: #f3f9f4;
  font-size: 0.82rem;
  line-height: 1.4;
}

.record-preview-sheet-note svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--record-green-deep); }

.record-preview-sheet-form .record-preview-sheet-submit {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 2px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, #35aa49, var(--record-green-deep));
  box-shadow: 0 9px 20px rgba(31, 128, 50, 0.2);
  font-size: 0.94rem;
  font-weight: 800;
}

.record-preview-sheet-submit svg { width: 20px; height: 20px; }

.record-preview-secondary-activity {
  box-shadow: 0 8px 24px rgba(22, 44, 31, 0.06);
}

/* Baling design workspace ------------------------------------------------ */
.baling-design-page {
  width: min(100%, 720px);
  display: grid;
  gap: 14px;
  margin: 0 auto;
  padding: 4px 0 28px;
  color: var(--record-ink);
}

.baling-design-heading,
.baling-design-recent-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.baling-design-heading h1 { margin: 0; font-size: 1.55rem; letter-spacing: -0.035em; }
.baling-design-heading p { margin: 3px 0 0; color: var(--record-muted); font-size: 0.78rem; }
.baling-design-heading > div:last-child { display: grid; justify-items: end; gap: 4px; }
.baling-design-heading > div:last-child > span { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border-radius: 999px; color: var(--record-green-deep); background: var(--record-green-soft); font-size: 0.75rem; font-weight: 800; }
.baling-design-heading > div:last-child > span i { width: 8px; height: 8px; border-radius: 50%; background: var(--record-green); }
.baling-design-heading > div:last-child small { color: var(--record-muted); font-size: 0.65rem; }
.baling-design-section-label { color: #59667a; font-size: 0.72rem; font-weight: 850; letter-spacing: 0.035em; text-transform: uppercase; }

.baling-design-stats,
.baling-design-operators { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.baling-design-stats article,
.baling-design-operators article {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--record-line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(22, 44, 31, 0.045);
}
.baling-design-stats article > span { width: 34px; height: 34px; display: grid; flex: 0 0 34px; place-items: center; color: var(--record-green); }
.baling-design-stats svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.baling-design-stats article > div,
.baling-design-operators article > div { min-width: 0; display: grid; gap: 2px; }
.baling-design-stats strong { overflow: hidden; font-size: 1.2rem; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.baling-design-stats small,
.baling-design-operators small { color: var(--record-muted); font-size: 0.7rem; }
.baling-design-operators article:first-child { border-color: #cfe0ef; background: linear-gradient(145deg, #fff, #f5faff); }
.baling-design-operators article:last-child { border-color: #ead9b7; background: linear-gradient(145deg, #fff, #fffaf1); }
.baling-design-person-avatar { width: 38px; height: 38px; display: grid; flex: 0 0 38px; place-items: center; border-radius: 50%; color: #fff; font-size: 0.95rem; }
.baling-design-person-avatar.oli { background: linear-gradient(135deg, #328ac2, #176899); }
.baling-design-person-avatar.james { background: linear-gradient(135deg, #dda61e, #b97900); }

.baling-design-new,
.baling-design-primary {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, #32aa48, var(--record-green-deep));
  box-shadow: 0 10px 22px rgba(36, 145, 58, 0.2);
  font-weight: 850;
}
.baling-design-new svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; }
.baling-design-recent-heading { align-items: center; margin-top: 3px; }
.baling-design-recent-heading > span:last-child { color: var(--record-green-deep); font-size: 0.7rem; font-weight: 750; }
.baling-design-recent-heading button { min-height: 34px; padding: 0 10px; border-radius: 9px; color: var(--record-green-deep); background: var(--record-green-soft); font-size: .7rem; font-weight: 800; }
.baling-design-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.baling-design-search-row > label { min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--record-line); border-radius: 12px; background: #fff; }
.baling-design-search-row svg { width: 21px; height: 21px; flex: 0 0 21px; fill: none; stroke: #667085; stroke-width: 1.8; }
.baling-design-search-row input { width: 100%; min-width: 0; height: 42px; padding: 0; border: 0; outline: 0; color: var(--record-ink); background: transparent; font-size: .78rem; }
.baling-design-search-row > button { position: relative; min-height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--record-line); border-radius: 12px; color: #445168; background: #fff; font-size: .76rem; font-weight: 800; }
.baling-design-search-row > button.active { color: var(--record-green-deep); border-color: #bcdac2; background: var(--record-green-soft); }
.baling-design-search-row > button b { min-width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--record-green); font-size: .6rem; }
.baling-design-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 9px; padding: 12px; border: 1px solid #cee0d2; border-radius: 13px; background: #f6fbf7; }
.baling-design-filters[hidden] { display: none; }
.baling-design-filters .field { gap: 5px; }
.baling-design-filters label { color: #59667a; font-size: .64rem; font-weight: 800; }
.baling-design-filters select { width: 100%; min-width: 0; min-height: 40px; padding: 0 30px 0 9px; border: 1px solid var(--record-line); border-radius: 9px; background-color: #fff; font-size: .7rem; }
.baling-design-filters > button { min-height: 40px; padding: 0 11px; border-radius: 9px; color: #566476; background: #fff; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.baling-design-recent-list { overflow: hidden; border: 1px solid var(--record-line); border-radius: 15px; background: #fff; box-shadow: 0 7px 24px rgba(22, 44, 31, 0.05); }
.baling-design-recent-row { width: 100%; min-height: 68px; display: grid; grid-template-columns: 44px 60px minmax(0, 1fr) 44px 12px; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid #e8ece9; color: var(--record-ink); background: #fff; text-align: left; }
.baling-design-recent-row:last-child { border-bottom: 0; }
.baling-design-crop-mark { width: 40px; height: 48px; display: grid; place-items: center; color: #c88b0a; border-right: 1px solid #edf0ee; }
.baling-design-crop-mark svg { width: 22px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.baling-crop-artwork { width: 38px; height: 48px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; overflow: visible; filter: drop-shadow(0 3px 4px rgba(86, 63, 17, .08)); }
.baling-crop-artwork img { display: block; width: 100%; height: 100%; object-fit: contain; }
.baling-design-crop-mark .baling-crop-artwork { width: 32px; height: 44px; flex-basis: 32px; }
.baling-crop-picker { position: relative; width: 100%; }
.baling-crop-picker-trigger { width: 100%; min-height: 54px; display: grid; grid-template-columns: 45px minmax(0, 1fr) 24px; align-items: center; gap: 10px; padding: 2px 13px 2px 7px; border: 1px solid #d9dfe4; border-radius: 11px; color: var(--record-ink); background: #fff; text-align: left; }
.baling-crop-picker-trigger .baling-crop-artwork { height: 49px; }
.baling-crop-picker-trigger strong { font-size: .82rem; }
.baling-crop-picker-trigger > span:last-child { color: #5d6979; font-size: 1.15rem; text-align: right; }
.baling-crop-picker-options { position: absolute; z-index: 160; top: calc(100% + 6px); right: 0; left: 0; max-height: min(440px, 58dvh); overflow-y: auto; border: 1px solid var(--record-line); border-radius: 14px; background: #fff; box-shadow: 0 18px 50px rgba(15, 23, 42, .2); }
.baling-crop-picker-options[hidden] { display: none; }
.baling-crop-picker-options > button { width: 100%; min-height: 66px; display: grid; grid-template-columns: 52px 1fr 24px; align-items: center; gap: 12px; padding: 6px 16px 6px 9px; border-bottom: 1px solid var(--record-line); color: var(--record-ink); background: #fff; text-align: left; }
.baling-crop-picker-options > button:last-child { border-bottom: 0; }
.baling-crop-picker-options > button:active { background: var(--record-green-soft); }
.baling-crop-picker-options > button > span:not(.baling-crop-artwork) { font-size: .88rem; }
.baling-crop-picker-options > button b { color: var(--record-green-deep); font-size: 1rem; text-align: right; }
@media (max-width: 700px) {
  .baling-crop-picker-options { position: fixed; top: auto; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); left: 12px; max-height: min(560px, calc(100dvh - 104px)); overscroll-behavior: contain; border-radius: 18px; box-shadow: 0 22px 70px rgba(15, 23, 42, .28); }
}
.baling-design-recent-row time,
.baling-design-recent-copy,
.baling-design-recent-total { min-width: 0; display: grid; gap: 2px; }
.baling-design-recent-row strong { overflow: hidden; font-size: 0.74rem; text-overflow: ellipsis; white-space: nowrap; }
.baling-design-recent-row small { overflow: hidden; color: var(--record-muted); font-size: 0.64rem; text-overflow: ellipsis; white-space: nowrap; }
.baling-design-recent-row .baling-design-recent-customer { color: #344054; font-weight: 750; }
.baling-design-recent-total { justify-items: end; }
.baling-design-recent-total strong { font-size: 1rem; }
.baling-design-chevron { color: #667085; font-size: 1.35rem; }

.baling-design-entry { width: min(100%, 620px); min-height: 100%; display: grid; align-content: start; gap: 0; margin: 0 auto; color: var(--record-ink); background: #fff; }
.baling-design-entry-header { min-height: 66px; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--record-line); text-align: center; }
.baling-design-entry-header button { width: 38px; height: 38px; color: var(--record-ink); background: transparent; font-size: 2rem; font-weight: 300; line-height: 1; }
.baling-design-entry-header h1 { margin: 0; font-size: 1.05rem; }
.baling-design-entry-header p { margin: 2px 0 0; color: var(--record-muted); font-size: 0.67rem; }
.baling-design-steps { display: grid; grid-template-columns: 1fr minmax(50px, 105px) 1fr; align-items: start; padding: 14px 22px 16px; border-bottom: 1px solid var(--record-line); }
.baling-design-steps > div { display: grid; justify-items: center; gap: 5px; color: var(--record-muted); }
.baling-design-steps > div span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #edf0f4; font-size: 0.8rem; font-weight: 800; }
.baling-design-steps > div strong { font-size: 0.7rem; }
.baling-design-steps > div.active span,
.baling-design-steps > div.complete span { color: #fff; background: linear-gradient(135deg, #32aa48, var(--record-green-deep)); }
.baling-design-steps > div.active strong,
.baling-design-steps > div.complete strong { color: var(--record-ink); }
.baling-design-steps i { height: 1px; margin-top: 17px; background: linear-gradient(90deg, var(--record-green), #d9dee5); }
.baling-design-entry-form { padding: 16px; }
.baling-design-step-panel { display: none; gap: 13px; }
.baling-design-step-panel.active { display: grid; }
.baling-design-location-card { overflow: hidden; padding: 12px; border: 1px solid var(--record-line); border-radius: 14px; background: #fff; }
.baling-design-gps-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.baling-design-gps-heading > span { width: 32px; height: 32px; display: grid; place-items: center; color: var(--record-green); }
.baling-design-gps-heading svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; }
.baling-design-gps-heading > div { display: grid; gap: 2px; margin-left: auto; justify-items: end; }
.baling-design-gps-heading strong { font-size: 0.72rem; }
.baling-design-gps-heading small { color: var(--record-muted); font-size: 0.63rem; }
.baling-design-location-card .baling-gps-box { margin: 0; border: 0; background: transparent; }
.baling-design-location-card .baling-gps-box > label,
.baling-design-location-card .baling-gps-box > small { display: none; }
.baling-design-location-card [data-baling-gps-canvas] { min-height: 155px; border-radius: 12px; }
.baling-design-acres { display: grid; grid-template-columns: minmax(0, 1fr) 76px; align-items: end; gap: 10px; }
.baling-design-acres button { min-height: 45px; }
.baling-design-entry-form .field { gap: 6px; }
.baling-design-entry-form .field label { color: #4e5c70; font-size: 0.72rem; font-weight: 800; }
.baling-design-entry-form input,
.baling-design-entry-form select,
.baling-design-entry-form textarea,
.baling-design-entry-form .baling-customer-combobox > input { min-height: 47px; border-color: #d9dfe4; border-radius: 11px; background: #fff; }
.baling-design-entry-form textarea { padding-top: 12px; }
.baling-design-people section { position: relative; padding-top: 14px; }
.baling-design-people section > h3 { margin: -31px 0 14px 50px; }
.baling-design-calculated { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.baling-design-calculated > div { display: grid; gap: 4px; padding: 14px; border-radius: 12px; background: var(--record-green-soft); }
.baling-design-calculated span { color: var(--record-muted); font-size: 0.68rem; }
.baling-design-calculated strong { color: var(--record-green-deep); font-size: 1.05rem; }
.baling-design-entry-actions { display: grid; gap: 9px; }
.baling-design-entry-actions button { min-height: 50px; border-radius: 12px; font-weight: 800; }
.baling-design-details { width: min(100%, 680px); display: grid; gap: 14px; margin: 0 auto; padding: 0 10px 24px; color: var(--record-ink); }
.baling-design-details-header { min-height: 66px; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; margin-inline: -10px; padding: 6px 10px; border-bottom: 1px solid var(--record-line); background: #fff; }
.baling-design-details-header h1 { margin: 0; font-size: 1.15rem; text-align: center; }
.baling-design-details-header button { width: 40px; height: 40px; padding: 0; color: var(--record-ink); background: transparent; font-size: 1.65rem; line-height: 1; }
.baling-detail-hero,
.baling-detail-card { padding: 18px; border: 1px solid var(--record-line); border-radius: 18px; background: #fff; box-shadow: 0 8px 26px rgba(22, 44, 31, .055); }
.baling-detail-hero { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.baling-detail-crop-icon { width: 72px; height: 82px; display: grid; place-items: center; border-radius: 15px; color: #c88b0a; background: linear-gradient(145deg, #fff9ed, #f9f1e1); }
.baling-detail-crop-icon svg { width: 45px; height: 55px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.baling-detail-crop-icon .baling-crop-artwork { width: 58px; height: 72px; flex-basis: 58px; }
.baling-detail-title { min-width: 0; display: grid; gap: 2px; }
.baling-detail-title span { color: var(--record-muted); font-size: .82rem; }
.baling-detail-title h2 { overflow: hidden; margin: 0; font-size: 1.48rem; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.baling-detail-title strong { color: #4d596b; font-size: .9rem; }
.baling-detail-status { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border-radius: 999px; font-size: .75rem; font-weight: 850; white-space: nowrap; }
.baling-detail-status.completed { color: #246b32; background: #edf7ee; }
.baling-detail-status.unfinished { color: #9a6500; background: #fff3d9; }
.baling-detail-quick-facts { grid-column: 1 / -1; display: grid; grid-template-columns: .8fr 1.2fr 1.3fr; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--record-line); }
.baling-detail-quick-facts > div { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 12px; border-right: 1px solid var(--record-line); }
.baling-detail-quick-facts > div:last-child { border-right: 0; }
.baling-detail-quick-facts svg { width: 23px; height: 23px; flex: 0 0 23px; fill: none; stroke: #445168; stroke-width: 1.8; }
.baling-detail-quick-facts strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.baling-detail-quick-facts span { min-width: 0; display: grid; gap: 1px; }
.baling-detail-quick-facts small { color: var(--record-muted); font-size: .64rem; }
.baling-detail-card { display: grid; gap: 14px; }
.baling-detail-location-grid { display: grid; grid-template-columns: minmax(180px, .9fr) minmax(0, 1.1fr); align-items: center; gap: 18px; }
.leaflet-map.baling-detail-map { height: 155px; min-height: 0; max-height: none; overflow: hidden; aspect-ratio: auto; border-radius: 13px; background: #e8eee9; }
.baling-detail-location-copy { min-width: 0; display: grid; gap: 5px; }
.baling-detail-location-copy h2 { overflow: hidden; margin: 0; font-size: 1.22rem; text-overflow: ellipsis; white-space: nowrap; }
.baling-detail-location-copy p { margin: 0; color: var(--record-muted); font-size: .8rem; }
.baling-detail-location-copy > span { width: max-content; margin-top: 7px; padding: 8px 12px; border-radius: 999px; color: var(--record-green-deep); background: var(--record-green-soft); font-size: .75rem; font-weight: 800; }
.baling-detail-map-empty { margin: -8px 0 0; color: var(--record-muted); font-size: .72rem; }
.baling-detail-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.baling-detail-summary > div {
  min-width: 0;
  min-height: 108px;
  display: grid;
  grid-template-rows: 34px 26px 15px;
  align-content: center;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--record-line);
  border-radius: 13px;
  background: #fff;
  font-variant-numeric: tabular-nums;
}
.baling-detail-summary > div > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: var(--record-green);
}
.baling-detail-summary svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.baling-detail-summary small { color: var(--record-muted); font-size: .68rem; font-weight: 700; line-height: 1.12; }
.baling-detail-summary > div > strong {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--record-ink);
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.baling-detail-summary > div > strong b { font: inherit; }
.baling-detail-summary > div > strong small { color: #394252; font-size: .72rem; letter-spacing: 0; }
.baling-detail-summary .operator > span { grid-template-columns: 30px minmax(0, 1fr); }
.baling-detail-summary .operator .baling-design-person-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-size: .72rem; font-style: normal; }
.baling-detail-summary .operator > span > small { color: #4d596b; font-size: .72rem; }
.baling-detail-summary .operator > strong { font-size: 1.06rem; }
.baling-detail-summary .operator > strong small { font-size: .66rem; }
.baling-detail-summary .operator > p { margin: 0; color: var(--record-muted); font-size: .68rem; line-height: 1; }
.baling-detail-list { display: grid; margin: 0; }
.baling-detail-list > div { min-height: 43px; display: grid; grid-template-columns: minmax(145px, .8fr) minmax(0, 1.2fr); align-items: center; gap: 14px; border-bottom: 1px solid var(--record-line); }
.baling-detail-list > div:last-child { border-bottom: 0; }
.baling-detail-list dt { display: flex; align-items: center; gap: 9px; color: #4e5c70; font-size: .75rem; font-weight: 750; }
.baling-detail-list dt svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.baling-detail-list dd { margin: 0; font-size: .82rem; text-align: right; overflow-wrap: anywhere; }
.baling-detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.baling-detail-actions button { min-height: 54px; border-radius: 13px; font-size: .86rem; font-weight: 850; }
.baling-detail-actions svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.baling-detail-actions .secondary { color: var(--record-ink); border-color: var(--record-line); background: #fff; }
.baling-detail-actions .danger { color: #c52e2e; border: 1px solid #ee9a9a; background: #fff; }
.muck-design-page { width: min(100%, 980px); display: grid; gap: 18px; margin: 0 auto; padding: 8px 10px 30px; color: var(--record-ink); }
.muck-design-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.muck-design-heading h1 { margin: 0; font-size: 1.55rem; letter-spacing: -.035em; }
.muck-design-heading p { margin: 4px 0 0; color: var(--record-muted); font-size: .82rem; }
.muck-design-heading > div:last-child { display: grid; justify-items: end; gap: 4px; }
.muck-design-heading > div:last-child span { min-height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 999px; color: var(--record-green-deep); background: var(--record-green-soft); font-size: .8rem; font-weight: 800; }
.muck-design-heading > div:last-child i { width: 9px; height: 9px; border-radius: 50%; background: var(--record-green); }
.muck-design-heading > div:last-child small { color: var(--record-muted); font-size: .68rem; }
.muck-design-launchers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.muck-design-launchers > button { min-height: 178px; display: grid; grid-template-columns: 54px minmax(0, 1fr) 20px; grid-template-rows: auto auto; align-content: center; align-items: center; column-gap: 14px; padding: 22px; border: 1px solid var(--record-line); border-radius: 16px; color: var(--record-ink); background: #fff; text-align: left; box-shadow: 0 8px 26px rgba(22, 44, 31, .045); }
.muck-design-launchers > button > span { grid-row: 1 / 3; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; }
.muck-design-launchers > button > span.green { color: var(--record-green); background: var(--record-green-soft); }
.muck-design-launchers > button > span.blue { color: #285f9e; background: #edf3fb; }
.muck-design-launchers svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.muck-design-launchers strong { align-self: end; font-size: 1rem; }
.muck-design-launchers small { align-self: start; color: var(--record-muted); font-size: .76rem; line-height: 1.35; }
.muck-design-launchers b { grid-column: 3; grid-row: 1 / 3; font-size: 1.8rem; font-weight: 400; }
.muck-design-location { min-height: 96px; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid #eadfc9; border-radius: 15px; background: #fffcf7; }
.muck-design-location > span { width: 42px; height: 42px; display: grid; place-items: center; color: #cf8500; }
.muck-design-location.detected { border-color: #cfe4d3; background: #f7fcf8; }
.muck-design-location.detected > span { color: var(--record-green); }
.muck-design-location svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.muck-design-location > div { min-width: 0; display: grid; gap: 4px; }
.muck-design-location small { color: var(--record-muted); font-size: .72rem; }
.muck-design-location strong { overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.muck-design-location p { margin: 0; color: var(--record-muted); font-size: .72rem; }
.muck-design-location p:first-letter { color: var(--record-green); }
.muck-design-location p i { margin: 0 5px; font-style: normal; }
.muck-design-location > button { min-height: 44px; padding: 0 15px; border: 1px solid var(--record-line); border-radius: 11px; color: var(--record-ink); background: #fff; font-size: .76rem; font-weight: 800; }
.muck-design-entry-panel,
.muck-design-summary { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--record-line); border-radius: 16px; background: #fff; box-shadow: 0 8px 26px rgba(22, 44, 31, .045); }
.muck-design-entry-panel[hidden] { display: none; }
.muck-design-entry-modal { position: fixed; z-index: 2300; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(12, 20, 16, .54); backdrop-filter: blur(3px); }
.muck-design-entry-modal .muck-design-entry-panel { width: min(100%, 680px); max-height: min(86dvh, 620px); overflow-y: auto; box-shadow: 0 24px 70px rgba(10, 28, 17, .24); }
body:has(.muck-design-entry-modal) { overflow: hidden; }
.muck-design-entry-panel .section-title h2,
.muck-design-summary h2 { margin: 0; font-size: 1rem; }
.muck-design-entry-panel .section-title p { margin: 3px 0 0; color: var(--record-muted); font-size: .72rem; }
.muck-design-entry-panel input,
.muck-design-entry-panel select { min-height: 48px; border-radius: 11px; background: #fff; }
.muck-design-submit { min-height: 50px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #31b44a, var(--record-green-deep)); font-weight: 850; }
.muck-design-submit:disabled { color: #fff; background: #a9b6af; }
@media (max-width: 520px) {
  .muck-design-entry-modal {
    place-items: center;
    padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
  }
  .muck-design-entry-modal .muck-design-entry-panel {
    width: min(100%, 420px);
    max-height: min(82dvh, 560px);
    padding: 18px 14px;
    border-radius: 22px;
  }
}
.muck-design-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.muck-design-stats article { min-width: 0; min-height: 90px; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--record-line); border-radius: 13px; }
.muck-design-stats article > span { width: 42px; height: 42px; display: grid; flex: 0 0 42px; place-items: center; border-radius: 11px; color: var(--record-green); background: var(--record-green-soft); }
.muck-design-stats svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.muck-design-stats article > div { min-width: 0; display: grid; gap: 3px; }
.muck-design-stats strong { overflow: hidden; font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }
.muck-design-stats small { color: var(--record-muted); font-size: .68rem; }
.muck-design-empty { min-height: 116px; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 20px; border: 1px dashed #cdd6df; border-radius: 13px; }
.muck-design-empty > span { width: 50px; height: 50px; display: grid; flex: 0 0 50px; place-items: center; border-radius: 12px; color: #58677a; background: #f6f8fa; }
.muck-design-empty svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.muck-design-empty strong { font-size: .8rem; }
.muck-design-empty p { margin: 5px 0 0; color: var(--record-muted); font-size: .72rem; }
.muck-design-recent { overflow: hidden; border: 1px solid var(--record-line); border-radius: 13px; }
.muck-design-recent-row { min-height: 62px; display: grid; grid-template-columns: 36px 54px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--record-line); }
.muck-design-recent-row:last-child { border-bottom: 0; }
.muck-design-recent-row > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--record-green); background: var(--record-green-soft); }
.muck-design-recent-row svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.muck-design-recent-row time,
.muck-design-recent-row > div { min-width: 0; display: grid; gap: 2px; }
.muck-design-recent-row strong { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.muck-design-recent-row small { overflow: hidden; color: var(--record-muted); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.muck-design-recent-row > b { font-size: .78rem; white-space: nowrap; }
.muck-design-field-groups { display: grid; gap: 12px; }
.muck-design-field-group { overflow: hidden; border: 1px solid #cfe1d2; border-radius: 13px; background: #fff; }
.muck-design-field-group > header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-left: 5px solid var(--record-green); background: linear-gradient(100deg, #f0f8f2, #f8fbf8); }
.muck-design-field-group > header > div { min-width: 0; display: grid; gap: 2px; }
.muck-design-field-group > header > div:last-child { flex: 0 0 auto; justify-items: end; text-align: right; }
.muck-design-field-group > header small { color: #68758a; font-size: .62rem; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; }
.muck-design-field-group > header strong { overflow: hidden; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.muck-design-field-group > header > div:last-child strong { color: var(--record-green-deep); font-size: 1rem; }
.muck-design-field-group > header span { overflow: hidden; color: var(--record-muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.muck-design-field-group > header .muck-design-field-rate { color: var(--record-green-deep); font-size: .72rem; font-weight: 800; }
.muck-design-field-group > div { display: grid; }
.muck-design-field-entry { min-height: 61px; display: grid; grid-template-columns: 34px 54px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--record-line); }
.muck-design-field-entry > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--record-green); background: var(--record-green-soft); }
.muck-design-field-entry svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.muck-design-field-entry time,
.muck-design-field-entry > div { min-width: 0; display: grid; gap: 2px; }
.muck-design-field-entry strong { overflow: hidden; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.muck-design-field-entry small { overflow: hidden; color: var(--record-muted); font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.muck-design-field-entry > b { font-size: .78rem; white-space: nowrap; }
.muck-design-view-all { min-height: 58px; display: grid; grid-template-columns: 34px 1fr 20px; align-items: center; gap: 10px; padding: 0 20px; border: 1px solid var(--record-line); border-radius: 14px; color: var(--record-ink); background: #fff; text-align: left; box-shadow: 0 8px 26px rgba(22, 44, 31, .04); }
.muck-design-view-all svg { width: 24px; height: 24px; fill: none; stroke: #526176; stroke-width: 1.8; }
.muck-design-view-all span { font-size: .82rem; font-weight: 800; }
.muck-design-view-all b { font-size: 1.6rem; font-weight: 400; text-align: right; }
.baling-design-editor { position: fixed; z-index: 1400; inset: 0; overflow-y: auto; padding: max(12px, env(safe-area-inset-top)) 10px max(20px, env(safe-area-inset-bottom)); background: rgba(16, 24, 39, 0.5); backdrop-filter: blur(8px); }
.baling-design-editor table { width: min(100%, 680px); margin: 30px auto; border: 0; background: transparent; }
.baling-design-editor .baling-edit-panel { border-radius: 18px; background: #fff; }

.record-preview-page-heading,
.record-preview-map-card { display: none; }

.record-preview-action-panel { display: contents; }
.record-preview-sidebar-toggle,
.record-preview-sidebar-footer { display: none; }

@media (min-width: 1100px), (min-width: 820px) and (orientation: landscape) {
  html:has(.record-preview-record-page),
  body:has(.record-preview-record-page) { height: 100%; overflow: hidden; }
  .record-preview-record-page { position: fixed; inset: 0; width: 100%; height: 100dvh; overflow: hidden; }
  .record-preview-shell { height: 100dvh; min-height: 0; overflow: hidden; }
  .record-preview-shell .app-header {
    position: fixed;
    z-index: 80;
    inset: 0 auto 0 0;
    width: 188px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e1e7e3;
    background: rgba(251, 253, 251, 0.97);
    box-shadow: 5px 0 24px rgba(22, 44, 31, 0.04);
  }
  .record-preview-shell .topbar { width: 100%; min-height: 100px; align-items: flex-start; padding: 22px 13px 14px; }
  .record-preview-shell .brand { align-items: center; gap: 9px; }
  .record-preview-shell .brand-mark { width: 42px; height: 42px; flex-basis: 42px; border-radius: 10px; }
  .record-preview-shell .brand h1 { max-width: 108px; font-size: 0.82rem; }
  .record-preview-shell .topbar .button-row { display: none; }
  .record-preview-sidebar-toggle {
    position: absolute;
    z-index: 2;
    top: 16px;
    right: -14px;
    width: 28px;
    min-width: 28px;
    min-height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #dce5df;
    border-radius: 999px;
    color: #365043;
    background: #fff;
    box-shadow: 0 4px 12px rgba(22, 44, 31, 0.1);
    font-size: 1.25rem;
    line-height: 1;
  }
  .record-preview-shell .nav { width: 100%; display: flex; flex: 1; flex-direction: column; align-items: stretch; gap: 5px; padding: 8px 12px; }
  .record-preview-shell .nav > button,
  .record-preview-shell .nav-menu-trigger { width: 100%; min-height: 44px; justify-content: flex-start; padding: 0 15px; border-radius: 9px; text-align: left; font-size: 0.82rem; }
  .record-preview-shell .nav-menu { width: 100%; }
  .record-preview-shell .nav-menu-items { left: calc(100% + 8px); right: auto; bottom: 0; }
  .record-preview-sidebar-footer {
    display: grid;
    gap: 5px;
    padding: 10px 12px max(14px, env(safe-area-inset-bottom));
    border-top: 1px solid #e6ebe8;
  }
  .record-preview-sidebar-footer button {
    position: relative;
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border: 0;
    border-radius: 9px;
    color: #506058;
    background: transparent;
    font-size: 0.78rem;
    font-weight: 700;
  }
  .record-preview-sidebar-footer button.active { color: #fff; background: var(--record-green); }
  .record-preview-sidebar-footer svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
  .record-preview-sidebar-footer .has-notifications::after { content: ""; position: absolute; top: 8px; left: 27px; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: var(--record-green); }
  /* Keep every wide content page inside the space left by the sidebar. Page-level
     width rules must not add the sidebar width back on a landscape tablet. */
  body .app.record-preview-shell > .main { width: calc(100% - 188px); height: 100dvh; margin-left: 188px; padding: max(34px, env(safe-area-inset-top)) 14px max(24px, env(safe-area-inset-bottom)); overflow: hidden; box-sizing: border-box; }
  .record-preview {
    width: min(100%, 1240px);
    grid-template-columns: minmax(0, 1.08fr) minmax(350px, 0.92fr);
    grid-template-areas: "heading heading" "location action" "loads map";
    grid-template-rows: auto minmax(215px, 0.82fr) minmax(250px, 1fr);
    align-items: stretch;
    gap: 12px;
    /* iPad standalone landscape can report a viewport a little taller than the
       area left below its status bar. Keep the final row inside the visible
       canvas so the lower card corners and shadow are not clipped. */
    height: calc(100% - 16px);
    padding-bottom: 0;
  }
  .record-preview-page-heading { grid-area: heading; display: block; padding: 0 2px 1px; }
  .record-preview-page-heading h1 { margin: 0; font-size: 1.22rem; letter-spacing: -0.025em; }
  .record-preview-page-heading p { margin: 1px 0 0; color: var(--record-muted); font-size: 0.78rem; }
  .record-preview-location { grid-area: location; min-height: 0; }
  .record-preview-location-main { padding: 12px 16px 8px; }
  .record-preview-pin { width: 34px; height: 34px; margin-bottom: 5px; }
  .record-preview-pin svg { width: 21px; height: 21px; }
  .record-preview-location h1 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
  .record-preview-acreage { margin-top: 4px; font-size: clamp(1.12rem, 1.9vw, 1.45rem); }
  .record-preview-location-main > p { margin-top: 5px; font-size: 0.8rem; }
  .record-preview-ready { min-height: 31px; margin-top: 6px; padding: 4px 9px; font-size: 0.75rem; }
  .record-preview-updated { margin-top: 3px; }
  .record-preview-change { margin-top: 5px; }
  .record-preview-change button { min-height: 32px; font-size: 0.7rem; }
  .record-preview-statuses { padding: 7px 5px 8px; }
  .record-preview-status-icon { width: 31px; height: 31px; flex-basis: 31px; }
  .record-preview-statuses small { font-size: 0.62rem; }
  .record-preview-statuses strong { font-size: 0.82rem; }
  .record-preview-action-panel {
    grid-area: action;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 11px;
    border: 1px solid var(--record-line);
    border-radius: var(--record-radius);
    background: #fff;
    box-shadow: var(--record-shadow);
  }
  .record-preview-vehicle { min-height: 132px; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .record-preview-vehicle-control { grid-template-columns: 132px minmax(0, 1fr); min-height: 98px; padding: 0; border: 0; background: transparent; }
  .record-preview-vehicle-control img { width: 128px; height: 90px; border-radius: 0; object-fit: contain; }
  .record-preview-vehicle-control strong,
  .record-preview-vehicle-control select,
  .record-preview-vehicle-trigger { font-size: 1.08rem; }
  .record-preview-vehicle-options { left: auto; width: min(330px, calc(100vw - 235px)); max-height: 184px; }
  .record-preview-vehicle-options button { min-height: 41px; padding-block: 5px; font-size: .88rem; }
  .record-preview-record { min-height: 58px; margin: 0; border-radius: 13px; font-size: 0.92rem; }
  .record-preview-block-reason { margin: 0 8px; font-size: 0.7rem; }
  .record-preview-activity:not(.record-preview-secondary-activity) { grid-area: loads; min-height: 0; display: flex; flex-direction: column; padding: 10px; }
  .record-preview-activity:not(.record-preview-secondary-activity) .record-preview-timeline { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b8c8bc transparent; }
  .record-preview-event { grid-template-columns: 18px 70px minmax(0, 1fr) 28px; gap: 4px; min-height: 47px; padding: 4px 0; }
  .record-preview-event-time { display: grid; gap: 1px; }
  .record-preview-event-time strong { font-size: 0.82rem; }
  .record-preview-event-copy strong { font-size: 0.8rem; }
  .record-preview-event-copy span { font-size: 0.72rem; }
  .record-preview-map-card {
    grid-area: map;
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    padding: 14px;
    border: 1px solid var(--record-line);
    border-radius: var(--record-radius);
    background: #fff;
    box-shadow: var(--record-shadow);
  }
  .record-preview-map-card > header,
  .record-preview-map-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .record-preview-map-card > header { padding: 0 3px 11px; }
  .record-preview-map-card h2 { margin: 0; color: var(--record-muted); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; }
  .record-preview-map-card > header span { color: var(--record-muted); font-size: 0.7rem; }
  .record-preview-map-card > .record-preview-map {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    border: 1px solid var(--record-line);
    border-radius: 12px;
    background: #e9eee9;
    box-sizing: border-box;
    aspect-ratio: auto;
  }
  .record-preview-map-card > footer { justify-content: flex-end; padding: 10px 2px 0; color: var(--record-muted); font-size: 0.7rem; }
  .record-preview-secondary-activity { grid-column: span 1; }

  .record-preview-shell.sidebar-collapsed .app-header { width: 68px; }
  body .app.record-preview-shell.sidebar-collapsed > .main { width: calc(100% - 68px); margin-left: 68px; }
  .record-preview-shell.sidebar-collapsed .topbar { justify-content: center; padding-inline: 8px; }
  .record-preview-shell.sidebar-collapsed .brand-mark { width: 40px; height: 40px; flex-basis: 40px; }
  .record-preview-shell.sidebar-collapsed .brand > div,
  .record-preview-shell.sidebar-collapsed .nav-menu,
  .record-preview-shell.sidebar-collapsed .record-preview-sidebar-footer span { display: none; }
  .record-preview-shell.sidebar-collapsed .nav > button { justify-content: center; padding: 0; color: transparent; font-size: 0; }
  .record-preview-shell.sidebar-collapsed .nav > button::before { content: attr(data-preview-symbol); color: #506058; font-size: 1.05rem; }
  .record-preview-shell.sidebar-collapsed .nav > button.active::before { color: #fff; }
  .record-preview-shell.sidebar-collapsed .record-preview-sidebar-footer button { justify-content: center; padding: 0; }
  .record-preview-shell.sidebar-collapsed .record-preview-sidebar-footer .has-notifications::after { left: calc(50% + 3px); }
  .record-preview-shell:has(.settings-page) { height: auto; min-height: 100dvh; overflow: visible; }
  .record-preview-shell:has(.settings-page) .main { height: 100dvh; overflow-y: auto; }
  .record-preview-shell.record-preview-content-page:not(:has(.settings-page)) { height: auto; min-height: 100dvh; overflow: visible; }
  .record-preview-shell.record-preview-content-page:not(:has(.settings-page)) .main { min-height: 100dvh; height: auto; overflow: visible; }
}

/* Desktop workspace: preserve the mobile visual language without stretching
   the touch layout across a mouse-and-keyboard screen. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .record-preview-shell .app-header { width: 220px; }
  .record-preview-shell .topbar { min-height: 112px; padding: 25px 18px 16px; }
  .record-preview-shell .brand { gap: 11px; }
  .record-preview-shell .brand-mark { width: 48px; height: 48px; flex-basis: 48px; }
  .record-preview-shell .brand h1 { max-width: 132px; font-size: .92rem; }
  .record-preview-shell .nav { gap: 6px; padding: 10px 16px; }
  .record-preview-shell .nav > button,
  .record-preview-shell .nav-menu-trigger { min-height: 48px; padding-inline: 17px; font-size: .9rem; }
  .record-preview-shell .record-preview-sidebar-footer { padding-inline: 16px; }
  .record-preview-shell .record-preview-sidebar-footer button { min-height: 46px; font-size: .84rem; }
  .record-preview-shell .main {
    width: calc(100% - 220px);
    margin-left: 220px;
    padding: 22px 22px 24px;
  }

  .record-preview {
    width: min(100%, 1500px);
    grid-template-columns: minmax(390px, .78fr) minmax(600px, 1.22fr);
    grid-template-areas: "heading heading" "location action" "map loads";
    grid-template-rows: auto minmax(230px, .68fr) minmax(330px, 1.32fr);
    gap: 16px;
  }
  .record-preview-page-heading h1 { font-size: 1.45rem; }
  .record-preview-page-heading p { font-size: .86rem; }
  .record-preview-location-main { padding: 15px 20px 10px; }
  .record-preview-location h1 { font-size: clamp(1.55rem, 2vw, 2rem); }
  .record-preview-acreage { font-size: 1.45rem; }

  .record-preview-action-panel {
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
    grid-template-rows: 1fr auto;
    align-items: center;
    align-content: stretch;
    gap: 12px 18px;
    padding: 18px;
  }
  .record-preview-vehicle { min-height: 0; grid-row: 1 / span 2; align-content: center; }
  .record-preview-vehicle-control { grid-template-columns: 118px minmax(0, 1fr); min-height: 112px; }
  .record-preview-vehicle-control img { width: 112px; height: 84px; }
  .record-preview-record { min-height: 68px; align-self: end; }
  .record-preview-block-reason { align-self: start; margin: 0 6px; line-height: 1.35; }

  .record-preview-activity:not(.record-preview-secondary-activity) { padding: 16px 18px 14px; }
  .record-preview-activity h2 { font-size: 1.35rem; }
  .record-preview-event { grid-template-columns: 22px 96px minmax(0, 1fr) 34px; min-height: 56px; gap: 8px; padding: 6px 0; }
  .record-preview-event-time { display: flex; gap: 7px; }
  .record-preview-event-time strong { font-size: .9rem; }
  .record-preview-event-copy strong { font-size: .9rem; }
  .record-preview-event-copy span { font-size: .78rem; }
  .record-preview-secondary-actions button { min-height: 46px; }

  .record-preview-map-card { padding: 16px; }
  .record-preview-map-card > header { padding-bottom: 10px; }
  .record-preview-map-card > footer { padding-top: 8px; }

  .record-preview-content-page .main { padding: 24px 28px 36px; }
  .baling-design-page { width: min(100%, 1240px); gap: 18px; }
  .baling-design-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .baling-design-stats article,
  .baling-design-operators article { min-height: 92px; }
  .muck-design-page { width: min(100%, 1240px); }
  .settings-page { width: min(100%, 1180px); }
}

@media (min-width: 521px) and (max-width: 819px), (min-width: 521px) and (max-width: 1100px) and (orientation: portrait) {
  .record-preview-shell .main { padding: 10px; }
  .record-preview { width: min(100%, 760px); gap: 10px; }
  .record-preview-location { border-radius: 19px; }
  .record-preview-location-main { padding: 17px 14px 12px; }
  .record-preview-pin { width: 38px; height: 38px; margin-bottom: 6px; }
  .record-preview-location h1 { max-width: 700px; font-size: 1.75rem; }
  .record-preview-acreage { margin-top: 5px; font-size: 1.42rem; }
  .record-preview-location-main > p { margin-top: 6px; font-size: 0.9rem; }
  .record-preview-ready { min-height: 34px; margin-top: 8px; padding: 5px 10px; font-size: 0.8rem; }
  .record-preview-updated { margin-top: 3px; }
  .record-preview-statuses { padding: 9px 5px 10px; }
  .record-preview-vehicle { padding: 9px 12px 10px; }
  .record-preview-vehicle-control { grid-template-columns: 92px minmax(0, 1fr); min-height: 66px; }
  .record-preview-vehicle-control img { width: 88px; height: 62px; border-radius: 0; object-fit: contain; }
  .record-preview-record { min-height: 58px; font-size: 1rem; }
  .record-preview-activity { padding: 11px; }
}

@media (max-width: 520px) {
  .record-preview-shell .main { padding: 8px; }

  .record-preview-shell .topbar {
    min-height: 56px;
    align-items: center;
    padding: 7px 10px 6px;
  }

  .record-preview-shell .brand { gap: 7px; }
  .record-preview-shell .brand-mark { width: 34px; height: 34px; flex-basis: 34px; border-radius: 9px; }
  .record-preview-shell .brand h1 { max-width: 132px; font-size: 0.82rem; }
  .record-preview-shell .topbar button { min-height: 36px; padding: 0 9px; border-radius: 10px; font-size: 0.7rem; }
  .record-preview-shell .topbar .record-preview-header-action { width: 38px; min-width: 38px; min-height: 38px; padding: 0; border: 0; border-radius: 999px; background: transparent; }
  .record-preview-admin-menu-items {
    right: -46px;
    width: min(430px, calc(100vw - 10px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 7px;
    border-radius: 12px;
  }
  .record-preview-admin-menu-items .nav-menu-group { gap: 1px; padding: 5px; }
  .record-preview-admin-menu-items .nav-menu-group-title { padding: 1px 5px 3px; font-size: .58rem; }
  .record-preview-admin-menu-items .nav-menu-group button { min-height: 28px; padding: 3px 6px; font-size: .69rem; }

  .record-preview-shell .admin-design-page { gap: 10px; }
  .record-preview-shell .admin-design-heading {
    min-height: 84px;
    gap: 11px;
    padding: 14px;
    border-radius: 16px;
  }
  .record-preview-shell .admin-design-heading-icon { width: 44px; height: 44px; flex-basis: 44px; border-radius: 13px; }
  .record-preview-shell .admin-design-heading-icon svg { width: 23px; height: 23px; }
  .record-preview-shell .admin-design-heading h1 { font-size: 1.34rem; }
  .record-preview-shell .admin-design-heading p { margin-top: 3px; font-size: .78rem; line-height: 1.3; }
  .record-preview-shell .admin-design-content { gap: 10px; }
  .record-preview-shell .admin-design-content > .panel { padding: 13px; border-radius: 15px; }
  .record-preview-shell .admin-design-content .section-title { align-items: flex-start; margin-bottom: 12px; padding-bottom: 10px; }
  .record-preview-shell .admin-design-content .section-title .button-row,
  .record-preview-shell .admin-design-content .section-title .compact-actions { width: 100%; }
  .record-preview-shell .admin-design-deployments { min-height: calc(100dvh - 150px); }

  .record-preview-shell .nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    padding: 3px 7px 6px;
    overflow: visible;
    border-top: 1px solid #f0f2f1;
    border-bottom: 1px solid #e8ece9;
  }

  .record-preview-shell .nav > button[data-view="dashboard"],
  .record-preview-shell .nav-menu { display: none; }

  .record-preview-shell .nav > button {
    width: 100%;
    min-height: 35px;
    justify-content: center;
    padding: 0 3px;
    font-size: 0.72rem;
  }
  .record-preview-shell .nav .record-preview-nav-icon { display: none; }
  .record-preview-shell:has(.baling-design-entry) .app-header { display: none; }
  .record-preview-shell:has(.baling-design-details) .app-header { display: none; }
  .record-preview-shell:has(.baling-design-entry) .main { min-height: 100dvh; padding: 0; background: #fff; }
  .record-preview-shell:has(.baling-design-details) .main { min-height: 100dvh; padding: 0; background: #f7f9f7; }
  .baling-design-page { gap: 12px; padding-inline: 6px; }
  .baling-design-heading { padding: 3px 2px 0; }
  .baling-design-stats article,
  .baling-design-operators article { min-height: 86px; padding: 13px 11px; gap: 9px; }
  .baling-design-stats strong { font-size: 1.08rem; }
  .baling-design-recent-row { grid-template-columns: 38px 58px minmax(0, 1fr) 42px 10px; gap: 8px; padding-inline: 10px; }
  .baling-design-crop-mark { width: 34px; height: 44px; }
  .baling-design-crop-mark .baling-crop-artwork { width: 28px; height: 40px; flex-basis: 28px; }
  .baling-design-search-row > button { padding-inline: 11px; }
  .baling-design-search-row > button span { display: none; }
  .baling-design-filters { grid-template-columns: 1fr 1fr; }
  .baling-design-filters > button { grid-column: 1 / -1; }
  .baling-design-entry { width: 100%; }
  .baling-design-details { width: 100%; gap: 11px; padding: 0 12px max(22px, env(safe-area-inset-bottom)); }
  .baling-design-details-header { position: sticky; z-index: 20; top: 0; margin-inline: -12px; padding-inline: 12px; }
  .baling-detail-hero,
  .baling-detail-card { padding: 14px; border-radius: 16px; }
  .baling-detail-hero { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 11px; }
  .baling-detail-crop-icon { width: 56px; height: 68px; }
  .baling-detail-crop-icon svg { width: 34px; height: 45px; }
  .baling-detail-title h2 { font-size: 1.2rem; }
  .baling-detail-status { min-height: 32px; padding-inline: 10px; font-size: .68rem; }
  .baling-detail-quick-facts { grid-template-columns: .72fr 1.12fr 1.16fr; }
  .baling-detail-quick-facts > div { gap: 6px; padding-inline: 7px; }
  .baling-detail-quick-facts svg { width: 20px; height: 20px; flex-basis: 20px; }
  .baling-detail-location-grid { grid-template-columns: 44% minmax(0, 1fr); gap: 13px; }
  .leaflet-map.baling-detail-map { height: 132px; min-height: 0; }
  .baling-detail-summary { gap: 7px; }
  .baling-detail-summary > div { min-height: 96px; padding: 10px; }
  .baling-detail-summary > div > strong { font-size: 1.08rem; }
  .baling-detail-list > div { grid-template-columns: minmax(120px, .8fr) minmax(0, 1.2fr); }
  .baling-design-entry-form { padding: 14px 13px max(22px, env(safe-area-inset-bottom)); }
  .muck-design-page { gap: 13px; padding: 4px 7px max(24px, env(safe-area-inset-bottom)); }
  .muck-design-heading h1 { font-size: 1.35rem; }
  .muck-design-heading p { font-size: .72rem; }
  .muck-design-heading > div:last-child span { min-height: 32px; padding-inline: 11px; font-size: .72rem; }
  .muck-design-launchers { gap: 10px; }
  .muck-design-launchers > button { min-height: 152px; grid-template-columns: 44px minmax(0, 1fr) 12px; column-gap: 9px; padding: 15px 12px; }
  .muck-design-launchers > button > span { width: 44px; height: 44px; }
  .muck-design-launchers svg { width: 26px; height: 26px; }
  .muck-design-launchers strong { font-size: .84rem; }
  .muck-design-launchers small { font-size: .66rem; }
  .muck-design-launchers b { font-size: 1.45rem; }
  .muck-design-location { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; padding: 13px 12px; }
  .muck-design-location > span { width: 36px; height: 36px; }
  .muck-design-location svg { width: 29px; height: 29px; }
  .muck-design-location > button { min-height: 40px; padding-inline: 10px; font-size: .68rem; }
  .muck-design-entry-panel,
  .muck-design-summary { gap: 13px; padding: 14px; }
  .muck-design-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .muck-design-stats article { min-height: 76px; gap: 8px; padding: 10px; }
  .muck-design-stats article > span { width: 36px; height: 36px; flex-basis: 36px; }
  .muck-design-stats svg { width: 23px; height: 23px; }
  .muck-design-stats strong { font-size: .9rem; }
  .muck-design-recent-row { grid-template-columns: 32px 48px minmax(0, 1fr) auto; gap: 7px; padding-inline: 8px; }
  .muck-design-field-group > header { min-height: 70px; padding: 10px; }
  .muck-design-field-entry { grid-template-columns: 30px 48px minmax(0, 1fr) auto; gap: 7px; padding-inline: 8px; }
  .baling-design-people { grid-template-columns: 1fr 1fr; }
  .record-preview-shell .nav > button.active { box-shadow: none; }

  .record-preview { gap: 8px; }
  .record-preview-location { border-radius: 18px; }
  .record-preview-contours { opacity: 0.22; }
  .record-preview-location-main { padding: 13px 11px 10px; }
  .record-preview-pin { width: 35px; height: 35px; margin-bottom: 6px; }
  .record-preview-pin svg { width: 20px; height: 20px; }
  .record-preview-location h1 { font-size: clamp(1.42rem, 6.7vw, 1.78rem); }
  .record-preview-acreage { margin-top: 5px; font-size: clamp(1.13rem, 5.7vw, 1.45rem); }
  .record-preview-location-main > p { margin-top: 6px; font-size: 0.82rem; }
  .record-preview-ready { min-height: 34px; margin-top: 8px; padding: 5px 10px; gap: 6px; font-size: 0.78rem; }
  .record-preview-ready svg { width: 17px; height: 17px; }
  .record-preview-updated { margin-top: 3px; font-size: 0.64rem; }
  .record-preview-change { margin-top: 7px; }
  .record-preview-change button,
  .record-preview-location .location-request-button { min-height: 36px; font-size: 0.76rem; }
  .record-preview-location .location-request-button { margin-top: 10px; }

  .record-preview-statuses { padding: 8px 3px 9px; }
  .record-preview-statuses > div { gap: 5px; padding: 0 4px; }
  .record-preview-status-icon { width: 27px; height: 27px; flex-basis: 27px; }
  .record-preview-status-icon svg { width: 15px; height: 15px; }
  .record-preview-statuses small { margin-bottom: 2px; font-size: 0.56rem; }
  .record-preview-statuses strong { font-size: 0.74rem; }

  .record-preview-vehicle { gap: 4px; padding: 8px 10px 9px; }
  .record-preview-vehicle-label { font-size: 0.64rem; }
  .record-preview-vehicle-control { grid-template-columns: 76px minmax(0, 1fr); min-height: 58px; gap: 8px; padding: 2px 9px 2px 4px; }
  .record-preview-vehicle-control img { display: block; width: 74px; height: 54px; border-radius: 0; object-fit: contain; }
  .record-preview-vehicle-control strong,
  .record-preview-vehicle-control select { min-height: 44px; font-size: 0.84rem; }

  .record-preview-record { min-height: 54px; gap: 9px; padding: 8px 12px; border-radius: 14px; background: #218a3a; box-shadow: 0 8px 18px rgba(33, 138, 58, 0.2); font-size: 0.91rem; text-transform: none; }
  .record-preview-record > span { width: 31px; height: 31px; }
  .record-preview-location,
  .record-preview-vehicle,
  .record-preview-activity { box-shadow: 0 5px 16px rgba(22, 44, 31, 0.07); }
  .record-preview-activity { padding: 10px 9px 8px; border-radius: 16px; }
  .record-preview-activity > header { padding-bottom: 7px; }
  .record-preview-activity h2 { font-size: 1rem; }
  .record-preview-activity > header > span { min-width: 31px; min-height: 31px; }
  .record-preview-event { grid-template-columns: 18px 68px minmax(0, 1fr) 30px; gap: 5px; min-height: 54px; }
  .record-preview-event-time { display: grid; gap: 1px; }
  .record-preview-event-time strong { font-size: 0.87rem; }
  .record-preview-event-copy strong { font-size: 0.82rem; }
  .record-preview-event-copy span { font-size: 0.74rem; }
  .record-preview-secondary-actions { gap: 7px; }
  .record-preview-secondary-actions button { font-size: 0.76rem; }

  .record-preview-sheet-backdrop { padding: 0; }
  .record-preview-sheet { width: 100%; max-height: 89dvh; padding: 28px 16px max(15px, env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }
  .record-preview-sheet-close { top: 17px; right: 11px; width: 36px; min-width: 36px; min-height: 36px; font-size: 1.55rem; }
  .record-preview-sheet-heading { grid-template-columns: 44px minmax(0, 1fr); gap: 11px; padding-right: 34px; }
  .record-preview-sheet-icon { width: 44px; height: 44px; }
  .record-preview-sheet-icon svg { width: 23px; height: 23px; }
  .record-preview-sheet-heading h2 { font-size: 1.12rem; }
  .record-preview-sheet-heading p { margin-top: 3px; font-size: 0.76rem; }
  .record-preview-sheet-form { gap: 13px; margin-top: 17px; }
  .record-preview-sheet-form .field { gap: 5px; }
  .record-preview-sheet-form .field > label { font-size: 0.72rem; }
  .record-preview-sheet-form input,
  .record-preview-sheet-form select { min-height: 47px; font-size: 16px; }
  .record-preview-sheet-form .missed-load-datetime input[type="date"],
  .record-preview-sheet-form .missed-load-datetime input[type="time"] { min-height: 47px; padding-inline: 12px; font-size: 16px; }
  .record-preview-sheet-form textarea { min-height: 66px; font-size: 16px; }
  .record-preview-sheet-form .missed-load-datetime { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .record-preview-sheet-note { padding: 11px; font-size: 0.74rem; }
  .record-preview-sheet-form .record-preview-sheet-submit { min-height: 50px; margin-top: 0; font-size: 0.86rem; }
}

@media (max-width: 380px) {
  .record-preview-shell .brand h1 { max-width: 125px; font-size: 0.86rem; }
  .record-preview-shell .topbar button { padding: 0 8px; font-size: 0.7rem; }
  .record-preview-status-icon { display: none; }
  .record-preview-statuses > div { padding: 0 7px; }
  .record-preview-event { grid-template-columns: 18px 66px minmax(0, 1fr) 30px; }
  .record-preview-secondary-actions button { padding-inline: 5px; font-size: 0.7rem; }
}

.field-dispatch-trigger {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
  border-radius: 8px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 7%, var(--panel));
  font-size: 0.78rem;
  font-weight: 800;
}

.field-dispatch-trigger:hover {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, var(--panel));
}

.field-dispatch-popover {
  width: min(430px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100dvh - 28px);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  color: var(--text);
  background: transparent;
}

.field-dispatch-popover::backdrop {
  background: rgba(10, 18, 24, 0.58);
  backdrop-filter: blur(4px);
}

.field-dispatch-popover .field-dispatch-card {
  width: 100%;
  max-height: calc(100dvh - 28px);
}

.field-dispatch-inline {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand) 7%, var(--panel));
}

.field-dispatch-inline > summary {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 11px;
  cursor: pointer;
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 800;
  list-style: none;
}

.field-dispatch-inline > summary::-webkit-details-marker { display: none; }

.field-dispatch-inline[open] > summary {
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
}

.field-dispatch-inline form {
  display: grid;
  gap: 9px;
  padding: 10px;
  background: var(--panel);
  border-radius: 0 0 8px 8px;
}

.field-dispatch-inline .field {
  gap: 4px;
}

.field-dispatch-inline label,
.field-dispatch-inline small {
  font-size: 0.7rem;
}

.field-dispatch-inline select,
.field-dispatch-inline textarea {
  min-height: 36px;
  padding: 7px 8px;
  font-size: 0.78rem;
}

.field-dispatch-dialog {
  position: fixed;
  z-index: 10050;
  inset: 0;
  display: grid;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  place-items: center;
  background: rgba(10, 18, 24, 0.58);
  backdrop-filter: blur(4px);
}

/* The overlay is appended directly to body, outside the light app shell. Keep
   it on the same green/light palette even when the computer uses dark mode. */
#field-dispatch-overlay-host {
  color-scheme: light;
  --bg: #f4f6f8;
  --panel: #ffffff;
  --text: #1d232c;
  --muted: #65707d;
  --line: #dbe0e6;
  --brand: #24913a;
  --brand-2: #1f7f32;
}

#field-dispatch-overlay-host .field select,
#field-dispatch-overlay-host .field textarea {
  border-color: #dbe0e6;
  color: #1d232c;
  background: #ffffff;
}

#field-dispatch-overlay-host option {
  color: #1d232c;
  background: #ffffff;
}

#field-dispatch-overlay-host .secondary {
  color: #ffffff;
  background: #24913a;
}

.field-dispatch-card {
  display: grid;
  width: min(430px, 100%);
  max-height: min(680px, calc(100dvh - 36px));
  gap: 15px;
  padding: 20px;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line));
  border-radius: 16px;
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.driver-notification .field-dispatch-card {
  border-top: 4px solid var(--brand);
}

.field-dispatch-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.field-dispatch-head span,
.field-dispatch-kicker {
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.field-dispatch-card h2 {
  margin: 2px 0 0;
  font-size: clamp(1.35rem, 5vw, 1.75rem);
}

.field-dispatch-close {
  display: grid;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 6%, var(--panel));
  font-size: 1.35rem;
  line-height: 1;
}

.field-dispatch-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.field-dispatch-facts span {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg) 72%, var(--panel));
}

.field-dispatch-facts small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
  text-transform: uppercase;
}

.field-dispatch-facts strong {
  overflow-wrap: anywhere;
  font-size: 0.9rem;
}

.field-dispatch-note {
  margin: 0;
  padding: 11px 12px;
  border-left: 3px solid var(--brand);
  border-radius: 4px 9px 9px 4px;
  background: color-mix(in srgb, var(--brand) 8%, var(--panel));
  line-height: 1.45;
}

.field-dispatch-boundary {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 82%, #1c765a 18%);
  text-align: center;
}

.field-dispatch-boundary svg {
  display: block;
  width: 100%;
  height: min(24vh, 190px);
}

.field-dispatch-boundary path {
  fill: rgba(51, 155, 111, 0.28);
  stroke: #2b9669;
  stroke-width: 5;
  vector-effect: non-scaling-stroke;
}

.field-dispatch-boundary small,
.field-dispatch-boundary-empty small { display: block; color: var(--muted); }

.field-dispatch-boundary-empty {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 130px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  text-align: center;
}

.field-dispatch-boundary-empty > span { font-size: 2rem; color: var(--accent); }

.field-dispatch-satellite {
  width: 100%;
  height: clamp(180px, 30vh, 280px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #26372e;
}

.field-dispatch-satellite .leaflet-control-attribution {
  padding: 1px 4px;
  font-size: 9px;
  opacity: 0.78;
}

.field-dispatch-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.field-dispatch-actions .link-button {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 4px 12px;
}

.field-dispatch-queue {
  color: var(--muted);
  text-align: center;
}

.field-dispatch-reminder {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  border-bottom: 1px solid #d3972e;
  background: #fff5dc;
  color: #33230d;
  box-shadow: 0 5px 18px rgba(32, 24, 10, 0.16);
}

.field-dispatch-reminder > div:first-child { display: grid; line-height: 1.15; }
.field-dispatch-reminder span { color: #8a5a08; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.field-dispatch-reminder small { color: #6f5a36; }
.field-dispatch-reminder > div:last-child { display: flex; gap: 8px; }

@media (max-width: 560px) {
  .field-dispatch-reminder { align-items: stretch; flex-direction: column; }
  .field-dispatch-reminder > div:last-child button { flex: 1; }
}

html[data-theme="dark"] .field-dispatch-reminder { background: #3a2b12; color: #fff7e8; border-bottom-color: #ca8b28; }
html[data-theme="dark"] .field-dispatch-reminder span { color: #ffc766; }
html[data-theme="dark"] .field-dispatch-reminder small { color: #d9c8a8; }

@media (max-width: 520px) {
  .field-dispatch-dialog {
    align-items: end;
    padding: 10px 10px max(10px, env(safe-area-inset-bottom));
  }

  .field-dispatch-card {
    width: 100%;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top)));
    padding: 17px;
    border-radius: 16px;
  }

  .field-dispatch-actions button {
    min-height: 48px;
  }
}

.recycle-bin-panel,
.recycle-bin-list {
  display: grid;
  gap: 12px;
}

.recycle-bin-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 92%, var(--bg));
}

.recycle-bin-list article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.recycle-bin-list article strong,
.recycle-bin-list article small {
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .recycle-bin-list article {
    grid-template-columns: 1fr;
  }

  .recycle-bin-list article button {
    width: 100%;
  }
}

/* NordPass is useful at login, but never on authenticated operational forms. */
body:has(.app) nordpass-autofill-portal,
body:has(.app) nordpass-autofill-button,
body:has(.app) [data-nordpass-autofill] {
  display: none !important;
}

/* Full-height deployment workspace mirrors the map-first Fields experience. */
body:has(.deployments-hub),
.app:has(.deployments-hub) {
  height: 100dvh;
  overflow: hidden;
}

.app:has(.deployments-hub) > .main {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.deployments-hub,
.deployments-workspace,
.deployment-map-stage {
  height: 100%;
  min-height: 0;
}

.deployments-workspace {
  position: relative;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 0;
}

.deployments-sidebar {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 10px;
  height: 100%;
  padding: 12px;
  overflow: hidden;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.deployments-sidebar .section-title { margin: 0; }
.deployment-add-button { width: 100%; }
.deployment-navigator-search { margin: 0; }
.deployment-navigator-results {
  display: grid;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  border-top: 1px solid var(--line);
}

.deployment-navigator-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 58px;
  padding: 8px 4px;
  color: var(--text);
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.deployment-navigator-item:hover,
.deployment-navigator-item:focus-visible,
.deployment-navigator-item.active { background: color-mix(in srgb, var(--info) 12%, var(--panel)); }
.deployment-navigator-item > span { display: grid; min-width: 0; gap: 2px; }
.deployment-navigator-item strong,
.deployment-navigator-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deployment-navigator-item small { color: var(--muted); font-size: 0.7rem; }
.deployment-navigator-item em { font-style: normal; font-size: 0.61rem; white-space: nowrap; }

.deployment-map-stage { position: relative; overflow: hidden; background: #dce4e1; }
.deployment-workspace-map {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
}

.deployment-map-toolbar {
  position: absolute;
  z-index: 650;
  top: 10px;
  left: 52px;
  right: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}

.deployment-map-toolbar-title,
.deployment-map-toolbar-actions,
.deployment-editor-dock {
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
}

.deployment-map-toolbar-title { display: grid; gap: 2px; min-width: 0; padding: 7px 10px; }
.deployment-map-toolbar-title strong { max-width: min(34vw, 390px); overflow: hidden; font-size: 0.88rem; text-overflow: ellipsis; white-space: nowrap; }
.deployment-map-toolbar-title small { color: var(--muted); font-size: 0.66rem; }
.deployment-map-toolbar-actions { padding: 4px; pointer-events: auto; }
.deployment-map-toolbar-actions button { min-height: 32px; }

.deployment-editor-dock {
  position: absolute;
  z-index: 640;
  top: 62px;
  right: 10px;
  bottom: 10px;
  width: min(390px, calc(100% - 72px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  margin: 0;
  padding: 12px;
  overflow: hidden;
}

.deployment-mobile-dock-tabs { display: none; }

.deployment-editor-form { display: grid; gap: 8px; }
.deployment-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.deployment-editor-head h2,
.deployment-editor-head p { margin: 0; }
.deployment-editor-head h2 { font-size: 1rem; }
.deployment-editor-basics,
.deployment-editor-options { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.deployment-editor-form .field { margin: 0; }
.deployment-editor-form textarea { min-height: 54px; resize: vertical; }
.deployment-editor-options input[type="color"] { min-height: 38px; }
.deployment-totals { padding: 8px; }
.deployment-editor-secondary-actions { justify-content: flex-start; padding: 0; }
.deployment-field-picker { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; min-height: 0; overflow: hidden; }
.deployment-field-picker .section-title { margin: 0; }
.deployment-field-picker h3 { margin: 0; font-size: 0.94rem; }
.deployment-field-options { max-height: none; min-height: 0; }
.deployment-field-options label { padding: 7px 3px; }
.deployment-save-button { width: 100%; }

@media (max-width: 840px) {
  .deployments-workspace { grid-template-columns: minmax(0, 1fr); }
  .deployments-sidebar {
    position: absolute;
    z-index: 650;
    top: 8px;
    left: 8px;
    width: min(290px, calc(100% - 16px));
    height: 178px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    box-shadow: var(--shadow);
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    backdrop-filter: blur(10px);
  }
  .deployments-sidebar .section-title { display: none; }
  .deployment-add-button { min-height: 34px; }
  .deployment-navigator-search label { display: none; }
  .deployment-navigator-search input { min-height: 34px; }
  .deployment-navigator-item { min-height: 43px; padding: 5px 2px; }
  .deployment-navigator-item small { font-size: 0.64rem; }
  .deployment-navigator-item em { display: none; }
  .deployment-map-toolbar { top: 194px; left: 8px; right: 8px; }
  .deployment-map-toolbar-title { display: none; }
  .deployment-map-toolbar-actions { margin-left: auto; }
  .deployment-editor-dock { top: auto; right: 8px; bottom: 8px; left: 8px; width: auto; max-height: 47%; padding: 10px; }
  .deployment-mobile-dock-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 8px; padding: 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); }
  .deployment-mobile-dock-tabs button { min-height: 32px; padding: 0 8px; color: var(--muted); background: transparent; border: 0; border-radius: 5px; font: inherit; font-size: 0.76rem; font-weight: 750; }
  .deployment-mobile-dock-tabs button.active { color: #fff; background: var(--info); }
  .deployment-editor-dock[data-deployment-dock-tab="details"] { display: block; overflow-y: auto; }
  .deployment-editor-dock[data-deployment-dock-tab="details"] > .deployment-field-picker { display: none; }
  .deployment-editor-dock[data-deployment-dock-tab="details"] > .deployment-editor-form { display: grid; }
  .deployment-editor-dock[data-deployment-dock-tab="details"] > .deployment-save-button { display: block; margin-top: 9px; }
  .deployment-editor-dock[data-deployment-dock-tab="fields"] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .deployment-editor-dock[data-deployment-dock-tab="fields"] > .deployment-editor-form,
  .deployment-editor-dock[data-deployment-dock-tab="fields"] > .deployment-save-button { display: none; }
  .deployment-editor-dock[data-deployment-dock-tab="fields"] > .deployment-field-picker { display: grid; min-height: 0; }
  .deployment-editor-form textarea { display: none; }
  .deployment-editor-basics,
  .deployment-editor-options { gap: 6px; }
  .deployment-field-options label { padding: 6px 2px; }
}

.bulk-load-tools {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.loads-driver-filter {
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--ok) 24%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--ok) 5%, var(--panel));
}

.loads-driver-filter label { min-width: 0; display: grid; grid-template-columns: auto minmax(180px, 320px); align-items: center; gap: 10px; }
.loads-driver-filter label > span { color: var(--muted); font-size: .76rem; font-weight: 800; }
.loads-driver-filter select { width: 100%; min-width: 0; min-height: 40px; padding: 7px 34px 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background-color: var(--panel); font-weight: 750; }
.loads-driver-filter small { color: var(--muted); font-size: .74rem; font-weight: 700; text-align: right; }

.bulk-load-selection-bar,
.bulk-load-editor {
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: var(--shadow);
}

.bulk-load-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
}

.bulk-load-selection-bar > div:first-child,
.bulk-load-editor-head > div {
  display: grid;
  gap: 1px;
}

.bulk-load-selection-bar span,
.bulk-load-editor-head span {
  color: var(--muted);
  font-size: 0.72rem;
}

.bulk-load-editor {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-top: 3px solid var(--brand);
}

.bulk-load-editor-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.bulk-load-location-fields,
.bulk-em-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.bulk-em-checks {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.bulk-em-checks summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 750;
  list-style: none;
}

.bulk-em-checks summary::-webkit-details-marker { display: none; }
.bulk-em-checks summary::before { content: "+"; margin-right: 8px; color: var(--muted); }
.bulk-em-checks[open] summary::before { content: "-"; }
.bulk-em-checks summary span { margin-left: auto; color: var(--muted); font-size: 0.72rem; font-weight: 600; }
.bulk-em-grid { padding: 10px; border-top: 1px solid var(--line); }
.bulk-load-apply { justify-self: end; min-width: 180px; }

.bulk-select-cell {
  width: 42px;
  text-align: center;
}

.bulk-select-cell input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--brand);
}

.admin-events-table .load-row.bulk-selected td {
  background: color-mix(in srgb, var(--info) 14%, var(--panel));
}

.bulk-select-day {
  flex: 0 0 auto;
  min-height: 28px;
}

.bulk-select-day.active {
  color: #fff;
  background: var(--brand);
}

.load-day-divider td > div > span {
  flex: 1 1 auto;
}

@media (max-width: 680px) {
  .loads-driver-filter { display: grid; align-items: stretch; gap: 7px; padding: 10px; }
  .loads-driver-filter label { grid-template-columns: 52px minmax(0, 1fr); }
  .loads-driver-filter small { text-align: left; }
  .bulk-load-tools { position: static; }
  .bulk-load-selection-bar { align-items: flex-start; }
  .bulk-load-selection-bar .compact-actions { flex-wrap: wrap; justify-content: flex-end; }
  .bulk-load-location-fields,
  .bulk-em-grid { grid-template-columns: minmax(0, 1fr); }
  .bulk-load-apply { width: 100%; justify-self: stretch; }
  .bulk-select-day { padding: 0 6px; font-size: 0.64rem; }

  .admin-events-table.bulk-mode th:nth-child(4),
  .admin-events-table.bulk-mode td:nth-child(4),
  .admin-events-table.bulk-mode th:nth-child(8),
  .admin-events-table.bulk-mode td:nth-child(8) { display: table-cell; }

  .admin-events-table.bulk-mode th:nth-child(5),
  .admin-events-table.bulk-mode td:nth-child(5),
  .admin-events-table.bulk-mode th:nth-child(6),
  .admin-events-table.bulk-mode td:nth-child(6),
  .admin-events-table.bulk-mode th:nth-child(7),
  .admin-events-table.bulk-mode td:nth-child(7) { display: none; }

  .admin-events-table.bulk-mode th:nth-child(1) { width: 10%; }
  .admin-events-table.bulk-mode th:nth-child(2) { width: 22%; }
  .admin-events-table.bulk-mode th:nth-child(3) { width: 31%; }
  .admin-events-table.bulk-mode th:nth-child(4) { width: 27%; }
  .admin-events-table.bulk-mode th:nth-child(8) { width: 10%; }
}

/* Full-height Fields workspace: the page itself never scrolls. */
body:has(.fields-hub) {
  height: 100dvh;
  overflow: hidden;
}

.app:has(.fields-hub) {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.app:has(.fields-hub) > .main {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.main .fields-hub,
.fields-hub .fields-workspace,
.fields-hub .fields-main,
.fields-hub .fields-map-panel,
.fields-hub .field-map-stage {
  height: 100%;
  min-height: 0;
}

.main .fields-hub {
  display: block;
}

.fields-hub .fields-workspace {
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 0;
}

.fields-hub .fields-sidebar {
  height: 100%;
  max-height: none;
  padding: 12px;
  overflow: hidden;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
}

.field-coordinate-locator {
  display: grid;
  gap: 5px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 86%, var(--bg));
}

.field-coordinate-locator > label {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.field-coordinate-locator > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.field-coordinate-locator input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--bg);
  font: 600 .78rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.field-coordinate-locator p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: .76rem;
}

.field-coordinate-locator p.matched { color: var(--ok); }
.field-coordinate-locator p.unmatched { color: var(--warn); }
.field-coordinate-locator .text-action {
  padding: 0;
  border: 0;
  color: var(--info);
  background: transparent;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
}

.fields-hub .fields-main {
  position: relative;
  display: block;
  overflow: hidden;
}

.fields-hub .fields-main > .fendt-import-status,
.fields-hub .fields-main > .fendt-import-preview {
  position: absolute;
  z-index: 720;
  top: 64px;
  right: 12px;
  bottom: 12px;
  left: auto;
  width: min(620px, calc(100% - 24px));
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.fields-hub .fields-main > .fendt-import-status {
  bottom: auto;
  max-height: calc(100% - 76px);
}

.fields-hub .fendt-import-preview form > .grid.three {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fields-hub .fendt-import-preview form > .grid.three > :nth-child(3) {
  grid-column: 1 / -1;
}

.fields-hub .fendt-import-preview .field-import-dataset-summary {
  display: grid;
  gap: 3px;
}

.fields-hub .fendt-import-preview .field-duplicate-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fields-hub .fendt-import-preview .fendt-comparison-grid,
.fields-hub .fendt-import-preview .fendt-field-comparison > .grid.two {
  grid-template-columns: minmax(0, 1fr);
}

.fields-hub .fendt-import-preview .button-row {
  flex-wrap: wrap;
}

.fields-hub .fields-map-panel {
  height: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  box-shadow: none;
}

.fields-hub .field-map-stage {
  position: relative;
  overflow: hidden;
}

.fields-hub .fields-map,
.fields-hub .field-map-workspace .fields-map,
.fields-hub .planning-map {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  border: 0;
  border-radius: 0;
}

.field-map-toolbar {
  position: absolute;
  z-index: 650;
  top: 10px;
  left: 52px;
  right: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}

.field-map-stage:has(.field-map-mode-dock) .field-map-toolbar {
  right: 205px;
}

.field-map-mode-dock {
  position: absolute;
  z-index: 660;
  top: 10px;
  right: 10px;
  pointer-events: auto;
}

.field-map-toolbar-title,
.field-map-toolbar-actions {
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
  pointer-events: auto;
}

.field-map-toolbar-title {
  display: grid;
  min-width: 0;
  padding: 7px 10px;
}

.field-map-toolbar-title strong {
  max-width: min(34vw, 390px);
  overflow: hidden;
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-map-toolbar-title small {
  color: var(--muted);
  font-size: 0.66rem;
}

.field-map-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 4px;
}

.field-map-toolbar-actions:empty {
  display: none;
}

.field-map-toolbar-actions button {
  min-height: 32px;
  white-space: nowrap;
}

.field-map-mode-tabs {
  min-height: 32px;
  padding: 2px;
  background: transparent;
  border: 0;
  border-radius: 5px;
}

.field-map-mode-tabs button {
  min-height: 28px;
  padding: 0 10px;
}

.fields-hub .field-map-inspector {
  top: 62px;
  right: 10px;
  max-height: calc(100% - 72px);
}

.field-map-stage > .integrated-planning-tools {
  position: absolute;
  z-index: 620;
  top: 62px;
  right: 10px;
  width: min(760px, calc(100% - 20px));
  max-width: calc(100% - 20px);
  max-height: calc(100% - 72px);
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

@media (max-width: 840px) {
  .app:has(.fields-hub) > .main {
    padding: 0;
  }

  .fields-hub .fields-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .field-map-toolbar {
    top: 50px;
    left: 8px;
    right: 8px;
    justify-content: flex-end;
  }

  .field-map-stage:has(.field-map-mode-dock) .field-map-toolbar {
    right: 8px;
  }

  .field-map-mode-dock {
    top: 8px;
    right: 8px;
  }

  .field-map-toolbar-title {
    display: none;
  }

  .field-map-toolbar-actions {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .field-map-toolbar-actions::-webkit-scrollbar {
    display: none;
  }

  .field-map-toolbar-actions button {
    width: auto;
    min-height: 30px;
    padding: 0 8px;
    font-size: 0.76rem;
  }

  .fields-hub .mobile-fields-toolbar {
    position: absolute;
    z-index: 640;
    top: 94px;
    left: 8px;
    right: 8px;
    display: grid;
    padding: 8px;
    box-shadow: var(--shadow);
  }

  .field-map-stage:has(.field-map-toolbar-actions:empty) .mobile-fields-toolbar {
    top: 50px;
  }

  .fields-hub .field-map-inspector {
    position: absolute;
    top: auto;
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    max-height: 43%;
    margin: 0;
    overflow: auto;
    border-radius: 7px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
  }

  .field-map-stage > .integrated-planning-tools {
    top: 150px;
    right: 8px;
    left: 8px;
    width: auto;
    max-height: calc(100% - 158px);
  }

  .fields-hub .fields-main > .fendt-import-preview {
    top: auto;
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    max-height: 72%;
  }

  .fields-hub .fields-main > .fendt-import-status {
    top: 56px;
    right: 8px;
    left: 8px;
    width: auto;
  }
}

/* Map-first field workspace */
.main:has(.fields-hub) {
  width: min(1540px, 100%);
  padding-top: 6px;
}

.main .fields-hub {
  gap: 4px;
}

.fields-hub .workspace-header {
  min-height: 34px;
  align-items: center;
  justify-content: flex-end;
}

.fields-hub .workspace-header > div:first-child {
  display: none;
}

.fields-hub .fields-workspace {
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 8px;
}

.fields-hub .fields-sidebar {
  padding: 12px;
  max-height: calc(100vh - 150px);
}

.fields-hub .fields-sidebar .section-title {
  margin-bottom: 8px;
}

.field-navigator {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.field-navigator-owner-title {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
  padding: 6px 9px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 94%, var(--bg));
  border-bottom: 1px solid var(--line);
  font-size: 0.7rem;
  cursor: pointer;
}

.field-navigator-owner-title::before { content: "−"; flex: 0 0 auto; margin-right: 2px; font-size: 0.9rem; line-height: 1; }
.field-navigator-owner.is-collapsed > .field-navigator-owner-title::before { content: "+"; }
.field-navigator-owner.is-collapsed > .field-navigator-item { display: none; }

.field-navigator-owner-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-navigator-owner-title span {
  flex: 0 0 auto;
}

.field-navigator-owner + .field-navigator-owner {
  border-top: 1px solid var(--line);
}

.fields-hub .field-navigator-results {
  max-height: none;
}

/* The deployment map shares the full remaining workspace, never the old fixed map height. */
.deployments-hub .deployment-fields-map,
.deployments-hub .deployment-workspace-map {
  height: 100%;
  min-height: 0;
  max-height: none;
}

.fields-hub .field-navigator-item.active {
  color: var(--text);
  background: color-mix(in srgb, var(--info) 14%, var(--panel));
  box-shadow: inset 3px 0 var(--info);
}

.fields-hub .fields-main {
  gap: 8px;
}

.fields-hub .fields-map-panel {
  min-width: 0;
  padding: 10px;
}

.fields-hub .fields-map-panel > .section-title {
  min-height: 32px;
  margin-bottom: 8px;
}

.fields-hub .fields-map-panel > .section-title h2 {
  font-size: 0.95rem;
}

.fields-hub .fields-map-panel > .section-title .compact-caption {
  display: none;
}

.fields-hub .fields-map-panel > .section-title button {
  min-height: 32px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.field-map-stage {
  position: relative;
  min-width: 0;
}

.field-map-workspace .fields-map {
  height: calc(100vh - 172px);
  min-height: 500px;
  max-height: 820px;
}

.field-map-inspector {
  position: absolute;
  z-index: 500;
  top: 12px;
  right: 12px;
  width: min(330px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  overflow-y: auto;
  padding: 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.field-inspector-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.field-inspector-head h3,
.field-inspector-head p {
  margin: 0;
}

.field-inspector-head h3 {
  font-size: 1rem;
}

.field-inspector-head p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.76rem;
}

.field-inspector-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
  margin: 10px 0;
}

.field-inspector-facts span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}

.field-inspector-facts small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.field-inspector-facts strong {
  overflow: hidden;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-inspector-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  align-items: start;
}

.field-inspector-command-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.field-inspector-command-row button { width: 100%; }

.field-inspector-details {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.field-inspector-details summary {
  min-height: 34px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 750;
}

.field-inspector-details[open] {
  grid-column: 1 / -1;
}

.field-inspector-detail-body {
  padding: 0 10px 10px;
  border-top: 1px solid var(--line);
}

.field-inspector-notes {
  margin: 9px 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.field-inspector-form {
  display: grid;
  gap: 8px;
  padding-top: 9px;
}

.field-inspector-form input,
.field-inspector-form textarea {
  min-height: 38px;
}

.field-inspector-form textarea {
  resize: vertical;
}

.field-inspector-secondary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

@media (max-width: 840px) {
  .main:has(.fields-hub) {
    padding: 4px 8px 10px;
  }

  .fields-hub {
    gap: 8px;
  }

  .fields-hub .workspace-header {
    align-items: center;
  }

  .fields-hub .mobile-fields-toolbar {
    padding: 9px;
  }

  .field-navigator.mobile .field-navigator-results,
  .field-navigator.mobile .field-navigator-empty {
    display: none;
  }

  .field-navigator.mobile:focus-within .field-navigator-results {
    display: grid;
    max-height: 220px;
  }

  .field-navigator.mobile:focus-within .field-navigator-empty:not([hidden]) {
    display: block;
  }

  .field-map-workspace .fields-map {
    height: calc(100vh - 245px);
    min-height: 360px;
  }

  .field-map-inspector {
    position: static;
    width: 100%;
    max-height: none;
    margin-top: 8px;
    padding: 10px;
    border-radius: 6px;
    box-shadow: none;
    backdrop-filter: none;
  }

  .field-inspector-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .field-inspector-actions > button {
    width: 100%;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
}

.install-gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--info) 14%, transparent), transparent 48%),
    var(--bg);
}
.install-card {
  display: grid;
  width: min(100%, 520px);
  gap: 20px;
  padding: clamp(22px, 5vw, 36px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
}
.install-card > img {
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
}
.install-card h1 {
  margin: 5px 0 8px;
  font-size: clamp(1.55rem, 6vw, 2.15rem);
  line-height: 1.08;
}
.install-card p {
  margin: 0;
  color: var(--muted);
}
.install-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.install-steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--info) 7%, var(--panel));
}
.install-steps li > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--info);
  font-weight: 900;
}
.install-steps strong,
.install-steps small,
.install-complete strong,
.install-complete span {
  display: block;
}
.install-steps small {
  margin-top: 2px;
  color: var(--muted);
}
.install-warning,
.install-complete {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 58%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--warn) 10%, var(--panel));
}
.install-complete {
  border-color: color-mix(in srgb, var(--ok) 58%, var(--line));
  background: color-mix(in srgb, var(--ok) 10%, var(--panel));
}
.install-complete span {
  margin-top: 4px;
  color: var(--muted);
}
.install-primary-action {
  width: 100%;
  min-height: 52px;
  font-size: 1rem;
}
.install-caption {
  text-align: center;
}

button, input, select, textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

a { color: inherit; }

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--panel);
}

.topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: var(--brand);
  font-weight: 800;
  object-fit: cover;
}

.app-brand-logo {
  flex: 0 0 36px;
  background-color: #1a1d22;
  background-image: url("icons/icon-192.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  contain: paint;
}

.brand h1 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.1;
}

.brand p, .muted {
  color: var(--muted);
}

.brand p {
  margin: 2px 0 0;
  font-size: 0.78rem;
}

.main {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 16px;
  flex: 1;
}

.login-wrap {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 18px;
}

.login-panel {
  width: min(440px, 100%);
  margin: 0 auto;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.login-panel h1 {
  margin: 14px 0 8px;
  font-size: 1.55rem;
}

.login-panel .brand-mark {
  width: 46px;
  height: 46px;
}

.remember-login {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 2px;
  color: var(--text);
  cursor: pointer;
}

.remember-login input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

.remember-login span {
  display: grid;
  gap: 1px;
}

.remember-login strong {
  font-size: .84rem;
}

.remember-login small {
  color: var(--muted);
  font-size: .7rem;
}

.demo-users {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}

.nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  overscroll-behavior-x: contain;
}

.nav button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
}

.nav button.active {
  color: #fff;
  background: var(--brand);
}

.nav-menu { position: relative; flex: 0 0 auto; }

.nav-menu-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}

.nav-menu-trigger::after { content: "\25be"; font-size: 0.72rem; line-height: 1; }
.nav-menu-trigger.active { color: #fff; background: var(--brand); }

.nav-menu-items {
  position: fixed;
  z-index: 1200;
  display: none;
  min-width: 170px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.nav-menu.open .nav-menu-items { display: grid; }
.nav-menu-items button { width: 100%; text-align: left; justify-content: space-between; }

.nav-menu-items {
  width: min(470px, calc(100vw - 16px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.nav-menu-group {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
}

.nav-menu-group-title {
  padding: 4px 8px 6px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.nav-menu-group button {
  min-height: 34px;
  padding: 0 9px;
}

.topbar-settings.active {
  color: #fff;
  background: var(--brand);
}

@media (max-width: 600px) {
  .nav-menu-items {
    grid-template-columns: 1fr;
    max-height: calc(100dvh - 108px);
    overflow-y: auto;
  }
}
.beta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--warn) 50%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--warn) 82%, var(--text));
  background: color-mix(in srgb, var(--warn) 15%, var(--panel));
  font-size: .62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}
.nav .beta-nav-item {
  border-color: color-mix(in srgb, var(--warn) 42%, transparent);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
}
.nav .beta-nav-item.active {
  color: var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--info) 58%, var(--panel)), color-mix(in srgb, var(--warn) 26%, var(--panel)));
}
.nav .beta-nav-item.active .beta-badge {
  color: #1c1400;
  border-color: color-mix(in srgb, var(--warn) 75%, #fff);
  background: color-mix(in srgb, var(--warn) 72%, #fff);
}
.heading-beta-badge {
  position: relative;
  top: -0.15em;
  margin-left: 6px;
  vertical-align: middle;
}

.new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  margin-left: 4px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--brand) 38%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--brand) 88%, var(--text));
  background: color-mix(in srgb, var(--brand) 10%, var(--panel));
  font-size: .62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}

.nav .new-nav-item.active .new-badge {
  color: var(--brand-dark);
  border-color: color-mix(in srgb, var(--brand) 55%, #fff);
  background: color-mix(in srgb, var(--brand) 16%, #fff);
}

.grid {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.grid > *, .split > *, .panel {
  min-width: 0;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-page {
  display: grid;
  gap: 12px;
}

.app:has(.dashboard-page) > .main {
  width: min(1680px, 100%);
}

.dashboard-stats {
  align-items: stretch;
}

.dashboard-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
  gap: 12px;
  align-items: start;
}

.dashboard-loads-panel,
.dashboard-baling-panel {
  min-width: 0;
}

.dashboard-page .table-wrap {
  overflow-x: hidden;
}

.dashboard-page .latest-records-table {
  min-width: 0;
  table-layout: fixed;
}

.dashboard-loads-panel .latest-records-table th:nth-child(1) { width: 13%; }
.dashboard-loads-panel .latest-records-table th:nth-child(2) { width: 21%; }
.dashboard-loads-panel .latest-records-table th:nth-child(3) { width: 22%; }
.dashboard-loads-panel .latest-records-table th:nth-child(4) { width: 12%; }
.dashboard-loads-panel .latest-records-table th:nth-child(5) { width: 12%; }
.dashboard-loads-panel .latest-records-table th:nth-child(6) { width: 11%; }
.dashboard-loads-panel .latest-records-table th:nth-child(7) { width: 9%; }
.dashboard-loads-panel .dashboard-loads-table th:nth-child(1) { width: 25%; }
.dashboard-loads-panel .dashboard-loads-table th:nth-child(2) { width: 52%; }
.dashboard-loads-panel .dashboard-loads-table th:nth-child(3) { width: 23%; }
.dashboard-loads-table tbody tr {
  cursor: pointer;
}

.dashboard-baling-list {
  display: grid;
  gap: 8px;
}

.dashboard-baling-record {
  display: grid;
  gap: 11px;
  width: 100%;
  min-height: 0;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, var(--info));
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 82%, var(--bg));
  color: var(--text);
  text-align: left;
}

.dashboard-baling-record:hover,
.dashboard-baling-record:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 60%, var(--line));
  background: color-mix(in srgb, var(--info) 10%, var(--panel));
}

.dashboard-baling-record-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 14px;
}

.dashboard-baling-record-heading > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.dashboard-baling-record-heading strong {
  overflow: hidden;
  font-size: 0.98rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-baling-record-heading small,
.dashboard-baling-record-heading time,
.dashboard-baling-facts small,
.dashboard-baling-facts em {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
}

.dashboard-baling-record-heading time {
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  gap: 1px;
  white-space: nowrap;
}

.dashboard-baling-record-heading time small {
  font-size: inherit;
}

.dashboard-baling-facts {
  display: grid;
  grid-template-columns: minmax(70px, 0.7fr) minmax(62px, 0.6fr) minmax(110px, 1.4fr);
  gap: 8px;
}

.dashboard-baling-facts > span {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg) 74%, var(--panel));
}

.dashboard-baling-facts strong {
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.dashboard-page .latest-records-table th,
.dashboard-page .latest-records-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-page .latest-records-table .ghost.compact {
  min-height: 30px;
  padding-inline: 9px;
}

.dashboard-page .metric,
.baling-page .panel,
.reports-page {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--line) 76%, var(--info));
}

.dashboard-page .metric {
  border-width: 1px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--info) 13%, var(--panel)), var(--panel) 72%);
}

.dashboard-page .metric:nth-child(2) {
  background: linear-gradient(145deg, color-mix(in srgb, var(--ok) 14%, var(--panel)), var(--panel) 72%);
}

.dashboard-page .metric:nth-child(3) {
  background: linear-gradient(145deg, color-mix(in srgb, var(--warn) 15%, var(--panel)), var(--panel) 72%);
}

.dashboard-page .metric strong {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}

.dashboard-page .metric::before,
.baling-page .panel::before,
.reports-page::before {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--info) 56%, transparent));
  content: "";
  pointer-events: none;
}

.dashboard-page .panel,
.baling-page .panel,
.reports-page {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.dashboard-loads-panel {
  background: linear-gradient(160deg, color-mix(in srgb, var(--info) 8%, var(--panel)) 0, var(--panel) 210px);
}

.dashboard-baling-panel {
  background: linear-gradient(160deg, color-mix(in srgb, var(--ok) 9%, var(--panel)) 0, var(--panel) 210px);
}

.dashboard-loads-panel .section-title h2 {
  color: color-mix(in srgb, var(--text) 82%, var(--info));
}

.dashboard-baling-panel .section-title h2 {
  color: color-mix(in srgb, var(--text) 82%, var(--ok));
}

.dashboard-page .section-title,
.baling-page .section-title,
.reports-page .section-title {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.dashboard-page .table-wrap,
.baling-page .table-wrap,
.reports-page .table-wrap {
  border-color: color-mix(in srgb, var(--line) 80%, var(--info));
  background: color-mix(in srgb, var(--panel) 88%, var(--bg));
}

.dashboard-page table,
.baling-page table,
.reports-page table {
  background: transparent;
}

.dashboard-page thead,
.baling-page thead,
.reports-page thead {
  background: color-mix(in srgb, var(--info) 10%, var(--panel));
}

.dashboard-page th,
.baling-page th,
.reports-page th {
  color: color-mix(in srgb, var(--text) 76%, var(--info));
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, var(--info));
}

.dashboard-page tbody tr:nth-child(even),
.baling-page tbody tr:nth-child(even),
.reports-page tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--panel) 76%, var(--bg));
}

.dashboard-page tbody tr:hover,
.baling-page tbody tr:hover,
.reports-page tbody tr:hover {
  background: color-mix(in srgb, var(--info) 14%, var(--panel));
}

.baling-page .baling-entry-panel,
.reports-page .filters,
.report-group-stats > div {
  border: 1px solid color-mix(in srgb, var(--line) 78%, var(--info));
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, var(--bg));
}

.baling-page .baling-entry-panel {
  padding-top: 18px;
}

.reports-page .filters {
  padding: 12px;
}

.report-ticket-details {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--info) 35%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--info) 7%, var(--panel));
}


.report-ticket-details p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: .8rem;
}

.report-group-stats > div {
  padding: 10px;
}

.panel, .card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.panel {
  padding: 16px;
}

.card {
  padding: 14px;
}

.hero-status {
  display: grid;
  gap: 14px;
}

.deployment-number {
  font-size: clamp(2.2rem, 12vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: 0;
  color: var(--brand);
  font-weight: 850;
  overflow-wrap: anywhere;
}

.deployment-number.location-unmatched,
.load-location > strong.location-unmatched {
  color: var(--warn);
}

.deployment-number.location-waiting,
.load-location > strong.location-waiting {
  color: var(--info);
}

.deployment-override-row {
  margin-top: 10px;
}

.deployment-override {
  display: flex;
  max-width: 420px;
  align-items: end;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.deployment-override .field {
  flex: 1;
}

.account-vehicle-control {
  max-width: 420px;
  margin-bottom: 14px;
}

.admin-record-vehicle {
  display: grid;
  align-items: center;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, var(--info));
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 76%, var(--bg));
  box-shadow: none;
}

.admin-record-vehicle .account-vehicle-control {
  display: grid;
  grid-template-columns: auto minmax(180px, 320px);
  align-items: center;
  gap: 8px;
  max-width: none;
  margin: 0;
}

.admin-record-vehicle label {
  margin: 0;
  color: color-mix(in srgb, var(--muted) 82%, var(--text));
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-record-vehicle select {
  min-height: 38px;
  border-color: color-mix(in srgb, var(--line) 76%, var(--info));
  background: color-mix(in srgb, var(--bg) 86%, var(--panel));
  font-weight: 800;
}

.vehicle-check-list {
  display: grid;
  gap: 7px;
  min-width: 150px;
}

.vehicle-check-list label {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.vehicle-check-list input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--brand);
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.metric span {
  color: var(--muted);
  font-size: 0.78rem;
}

.metric strong {
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.tank-status-metric {
  position: relative;
}

.tank-status-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.tank-status-actions .status {
  font-size: 0.7rem;
}

.tank-status-actions button {
  min-height: 28px;
  padding: 0 8px;
  font-size: 0.75rem;
}

.tank-override {
  max-width: 520px;
  margin-top: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.primary-action {
  width: 100%;
  min-height: 76px;
  border-radius: 8px;
  color: #fff;
  background: var(--brand);
  font-size: 1.22rem;
  font-weight: 800;
}

.load-only-view {
  width: min(560px, 100%);
  display: grid;
  gap: 12px;
  margin: 0 auto;
}

.load-operator .account-vehicle-control {
  max-width: none;
  margin: 0;
}

.load-operator select {
  min-height: 52px;
  font-size: 1rem;
  font-weight: 750;
}

.load-location {
  display: grid;
  gap: 8px;
  text-align: center;
}

.load-location > span:first-child {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.load-location > strong {
  color: var(--brand);
  font-size: clamp(2.2rem, 12vw, 4.2rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

.load-field-name {
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.load-location .status {
  justify-self: center;
}

.location-request-button {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 52px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(36, 95, 147, 0.18);
}

.load-record-button {
  min-height: 92px;
  font-size: 1.35rem;
}

.load-history {
  padding: 12px;
}

.load-history .section-title {
  margin-bottom: 6px;
}

.load-history-list {
  display: grid;
}

.load-history-list > div {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border-top: 1px solid var(--line);
}

.load-history-list .event-gap {
  margin-left: 5px;
  font-size: 0.68rem;
  font-weight: 600;
}

.load-history-list > div > span:not(.status) {
  min-width: 0;
  overflow-wrap: anywhere;
}

.load-history-list .status {
  font-size: 0.68rem;
}
.load-history-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.waiting-time-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.waiting-time-actions .link-button {
  min-height: 34px;
  padding: 4px 6px;
}

.compact-role-select {
  min-width: 145px;
  min-height: 36px;
}

.record-block-reason {
  margin: -6px 0 0;
  color: var(--danger);
  font-size: 0.84rem;
  font-weight: 700;
  text-align: center;
}

.secondary, .ghost, .danger, .warn {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  font-weight: 700;
}

.secondary {
  color: #fff;
  background: var(--brand-2);
}

.ghost {
  color: var(--text);
  background: #eef4f1;
  border: 1px solid var(--line);
}

.danger {
  color: #fff;
  background: var(--danger);
}

.warn {
  color: #211900;
  background: #ffd874;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
  background: #eef4f1;
}

.status.ok { color: var(--ok); background: #e7f4eb; }
.status.warn { color: var(--warn); background: #fff3cd; }
.status.danger { color: var(--danger); background: #f8e5e5; }
.status.info { color: var(--info); background: #e8f1fb; }

.form {
  display: grid;
  gap: 12px;
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.field input, .field select, .field textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.field .vehicle-check-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.field .vehicle-check-list label {
  min-height: 36px;
  padding: 5px 10px;
  color: var(--text);
  background: #f5f8f7;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.field .vehicle-check-list input[type="checkbox"] {
  width: 20px;
  min-height: 20px;
  padding: 0;
}

.field textarea {
  min-height: 92px;
  resize: vertical;
}

.missed-load-panel {
  width: min(100%, 620px);
  margin-inline: auto;
}

.missed-load-form,
.missed-load-datetime,
.missed-load-datetime .field {
  min-width: 0;
}

.missed-load-datetime {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
}

.missed-load-form input[type="date"],
.missed-load-form input[type="time"] {
  display: block;
  width: 100%;
  inline-size: 100%;
  min-width: 0;
  min-inline-size: 0;
  max-width: 100%;
  max-inline-size: 100%;
  padding-inline: 8px 4px;
  -webkit-appearance: none;
  appearance: none;
}

.missed-load-form input[type="date"]::-webkit-date-and-time-value,
.missed-load-form input[type="time"]::-webkit-date-and-time-value {
  min-width: 0;
  text-align: left;
}

.missed-load-form input[type="date"]::-webkit-calendar-picker-indicator,
.missed-load-form input[type="time"]::-webkit-calendar-picker-indicator {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 0 0 3px;
}

.missed-load-notes label span {
  font-weight: 500;
}

.missed-load-notes textarea {
  min-height: 68px;
}

.missed-destination-picker {
  position: relative;
}

.missed-destination-results {
  position: absolute;
  z-index: 1250;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  max-height: min(280px, 42vh);
  overflow-y: auto;
  padding: 5px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: var(--shadow);
}

.missed-destination-option {
  display: grid;
  width: 100%;
  min-height: 48px;
  gap: 2px;
  padding: 7px 9px;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 5px;
  text-align: left;
}

.missed-destination-option[hidden] {
  display: none;
}

.missed-destination-option:hover,
.missed-destination-option:focus {
  background: color-mix(in srgb, var(--info) 15%, var(--panel));
}

.missed-destination-option strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.missed-destination-option span,
.missed-destination-selected,
.missed-destination-empty {
  color: var(--muted);
  font-size: 0.72rem;
}

.missed-destination-empty {
  padding: 12px 9px;
  text-align: center;
}

.missed-destination-heading {
  padding: 5px 9px 4px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.missed-destination-heading[hidden] { display: none; }

.missed-destination-selected {
  margin-top: -1px;
}

@media (max-width: 520px) {
  .missed-load-panel {
    padding: 14px;
  }

  .missed-load-panel .section-title {
    margin-bottom: 10px;
  }

  .missed-load-form {
    gap: 10px;
  }

  .missed-load-form .field {
    gap: 4px;
  }

  .missed-load-form .field input,
  .missed-load-form .field select {
    min-height: 42px;
    padding-block: 7px;
  }

  .missed-load-form button[type="submit"] {
    width: 100%;
    min-height: 46px;
  }
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  min-width: 720px;
}

.compact-table {
  min-width: 0;
}

.latest-records-table {
  min-width: 640px;
}

.latest-records-table th,
.latest-records-table td {
  padding: 7px 8px;
  font-size: 0.82rem;
}

.latest-records-table .status {
  min-height: 24px;
  padding: 0 7px;
  font-size: 0.72rem;
}

.admin-events-table {
  min-width: 820px;
  table-layout: fixed;
}

.admin-events-table th:nth-child(1) { width: 13%; }
.admin-events-table th:nth-child(2) { width: 21%; }
.admin-events-table th:nth-child(3) { width: 27%; }
.admin-events-table th:nth-child(4) { width: 11%; }
.admin-events-table th:nth-child(5) { width: 12%; }
.admin-events-table th:nth-child(6) { width: 11%; }
.admin-events-table th:nth-child(7) { width: 5%; }

.admin-events-table.own-load-remove-enabled th:nth-child(2) { width: 19%; }
.admin-events-table.own-load-remove-enabled th:nth-child(3) { width: 25%; }
.admin-events-table .load-remove-cell {
  width: 4%;
  padding-inline: 4px;
  text-align: center;
}

.load-remove-button {
  display: inline-grid;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1;
}

.load-remove-button:hover,
.load-remove-button:focus-visible {
  border-color: color-mix(in srgb, var(--danger) 30%, var(--line));
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, var(--panel));
}

.admin-events-table.bulk-mode th:nth-child(1) { width: 5%; }
.admin-events-table.bulk-mode th:nth-child(2) { width: 12%; }
.admin-events-table.bulk-mode th:nth-child(3) { width: 19%; }
.admin-events-table.bulk-mode th:nth-child(4) { width: 26%; }
.admin-events-table.bulk-mode th:nth-child(5) { width: 10%; }
.admin-events-table.bulk-mode th:nth-child(6) { width: 11%; }
.admin-events-table.bulk-mode th:nth-child(7) { width: 12%; }
.admin-events-table.bulk-mode th:nth-child(8) { width: 5%; }

.admin-events-table th,
.admin-events-table td {
  padding: 8px 9px;
  font-size: 0.83rem;
  vertical-align: middle;
}

.admin-events-table .status {
  min-height: 24px;
  padding: 0 7px;
  font-size: 0.71rem;
  white-space: nowrap;
}

.admin-events-table .load-day-divider td {
  padding: 8px 10px;
  color: var(--brand);
  background: #edf6f3;
  border-top: 2px solid var(--brand);
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem;
  font-weight: 800;
}

.load-day-divider td > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.load-day-divider strong {
  flex: 0 0 auto;
  padding: 3px 7px;
  color: var(--green);
  background: #dceee8;
  border-radius: 6px;
  font-size: 0.72rem;
  white-space: nowrap;
}

.admin-events-table .load-row { cursor: pointer; }
.admin-events-table .load-row:hover td,
.admin-events-table .load-row:focus td { background: #f2f8f6; }
.admin-events-table .load-row:focus { outline: none; }

.admin-events-table th:nth-child(7),
.admin-events-table .sync-cell {
  width: 66px;
  text-align: center;
}

@media (min-width: 521px) and (max-width: 1100px) {
  .admin-events-wrap { overflow-x: hidden; }

  .admin-events-table { min-width: 0; }

  .admin-events-table th,
  .admin-events-table td {
    padding: 7px 6px;
    font-size: 0.78rem;
    overflow-wrap: anywhere;
  }

  .admin-events-table .status {
    padding-inline: 5px;
    font-size: 0.66rem;
    white-space: normal;
  }
}

.sync-indicator {
  position: relative;
  display: inline-grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
}

.sync-indicator.ok { background: #e3f3e9; }
.sync-indicator.warn { color: #815d00; background: #fff0bd; }
.sync-indicator.danger { color: #a5262b; background: #f9dede; }

.sync-indicator.ok::before {
  width: 6px;
  height: 11px;
  border-right: 2px solid #19753c;
  border-bottom: 2px solid #19753c;
  content: "";
  transform: translateY(-1px) rotate(45deg);
}

.sync-indicator.warn::before,
.sync-indicator.danger::before {
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.sync-indicator.warn::before { content: "!"; }
.sync-indicator.danger::before { content: "x"; }

.event-entry-type {
  display: block;
  font-weight: 700;
}

.compact-event-flag {
  margin-top: 4px;
}

.compact-actions {
  display: flex;
  gap: 5px;
  white-space: nowrap;
}

.compact-actions button {
  min-height: 32px;
}
.app-update-banner {
  position: sticky;
  z-index: 1600;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--info) 35%, var(--line));
  background: color-mix(in srgb, var(--info) 12%, var(--panel));
}
.app-update-banner span,
.app-update-banner small { display: block; }
.app-update-banner small { color: var(--muted); }
.daily-completion-panel { margin-top: 12px; }
.daily-completion-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.daily-completion-grid > div {
  display: grid;
  gap: 3px;
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}
.daily-completion-grid small,
.daily-completion-grid span { color: var(--muted); font-size: .72rem; }
.daily-completion-grid strong { font-size: 1.05rem; }
@media (max-width: 620px) {
  .app-update-banner { justify-content: space-between; }
  .app-update-banner small { display: none; }
  .daily-completion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.compact-date,
.compact-caption {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
}

.compact-driver {
  display: none;
}

.today-events {
  padding: 14px;
}

.today-events .section-title {
  margin-bottom: 8px;
}

.today-events .compact-empty {
  padding: 14px;
}

.event-gap {
  display: inline-block;
  margin-left: 6px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}

th, td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 0.9rem;
}

td select {
  min-height: 38px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

th {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

tr:last-child td { border-bottom: 0; }

.map-shell {
  display: grid;
  gap: 10px;
}

.map-editor-title {
  align-items: flex-start;
}

.map-editor-title h2 {
  margin-bottom: 3px;
}

.map-instruction {
  margin: 0;
  font-size: 0.86rem;
}

.map-canvas, .leaflet-map {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 560px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #e8eee9;
}

.map-canvas {
  touch-action: none;
}

.leaflet-map {
  min-height: 360px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.editor-map {
  cursor: crosshair;
}

.leaflet-container {
  font: inherit;
  touch-action: none;
}

.gps-label {
  width: max-content !important;
  height: auto !important;
  padding: 5px 8px;
  color: #fff;
  background: rgba(13, 28, 25, 0.88);
  border-radius: 8px;
  border: 0;
  box-shadow: var(--shadow);
  font-weight: 800;
  white-space: nowrap;
}

.vertex-handle {
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  margin-left: -17px !important;
  margin-top: -17px !important;
  place-items: center;
  border: 3px solid #245f93;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  color: #245f93;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.vertex-handle.selected {
  background: #f5b84b;
  border-color: #173f37;
  transform: scale(1.14);
}

.map-selection-bar {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f9f7;
  font-weight: 700;
}

button.compact {
  min-height: 34px;
  padding: 6px 10px;
}

button:disabled {
  cursor: default;
  opacity: 0.45;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  gap: 12px;
}

.toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 18px;
  z-index: 20;
  display: grid;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto;
}

.toast-item {
  padding: 12px 14px;
  color: #fff;
  background: #18342f;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.empty {
  padding: 22px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fff;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-title h2 {
  margin: 0;
  font-size: 1.2rem;
}

.list {
  display: grid;
  gap: 8px;
}

.event-card {
  display: grid;
  gap: 8px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.event-card header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.load-detail-page {
  display: grid;
  gap: 10px;
}

.load-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
}

.load-detail-header h2,
.load-detail-header p,
.detail-box h3,
.detail-notes {
  margin: 0;
}

.load-detail-header h2 {
  font-size: 1.2rem;
}

.load-detail-header p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.load-detail-editor {
  padding: 16px;
  border-color: color-mix(in srgb, var(--green) 45%, var(--line));
  box-shadow: 0 12px 30px rgba(20, 74, 42, 0.1);
}

.load-detail-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.load-detail-editor-head h3,
.load-detail-editor-head p {
  margin: 0;
}

.load-detail-editor-head h3 {
  font-size: 1.05rem;
}

.load-detail-editor-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.84rem;
}

.load-detail-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.load-detail-editor-notes {
  margin-top: 12px;
  align-items: end;
}

.load-detail-editor textarea {
  min-height: 45px;
  resize: vertical;
}

.load-detail-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.load-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.detail-box {
  min-width: 0;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.detail-box h3 {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
}

.detail-wide {
  grid-column: 1 / -1;
}

.detail-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}

.detail-fact {
  min-width: 0;
  padding: 9px 0 7px;
}

.detail-fact.wide {
  grid-column: 1 / -1;
}

.detail-fact span,
.detail-fact strong {
  display: block;
}

.detail-fact span {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 0.7rem;
}

.detail-fact strong {
  font-size: 0.87rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.detail-fact.coordinate strong,
.detail-fact.technical-id strong {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.76rem;
  font-weight: 600;
}

.record-facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.record-facts.compact-record-facts {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.detail-notes {
  padding-top: 10px;
  font-size: 0.87rem;
  line-height: 1.4;
}

@media (min-width: 1200px) {
  .load-detail-page {
    gap: 8px;
  }

  .load-detail-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .load-detail-grid > .detail-box {
    padding: 10px 12px;
    box-shadow: 0 4px 14px rgba(27, 39, 53, 0.055);
  }

  .load-detail-grid > .detail-box h3 {
    padding-bottom: 6px;
    font-size: 0.88rem;
  }

  .load-detail-grid > .detail-box:not(.detail-wide) .detail-facts {
    gap: 0 10px;
  }

  .load-detail-grid .detail-fact {
    padding: 6px 0 4px;
  }

  .load-detail-grid .detail-fact span {
    font-size: 0.65rem;
  }

  .load-detail-grid .detail-fact strong {
    font-size: 0.8rem;
  }

  .load-detail-grid #em-compliance-form .section-title {
    margin-bottom: 7px;
  }

  .load-detail-grid #em-compliance-form .filters {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 6px;
  }

  .load-detail-grid #em-compliance-form .field label {
    font-size: 0.65rem;
  }

  .load-detail-grid #em-compliance-form select {
    min-height: 36px;
    padding-block: 6px;
    font-size: 0.78rem;
  }

  .load-detail-record-card {
    grid-column: span 3;
  }

  .load-detail-record-card .record-facts {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .load-detail-notes-card {
    grid-column: span 1;
  }

  .load-detail-notes-card .detail-notes {
    padding-top: 7px;
    font-size: 0.8rem;
  }

  .load-detail-history-card {
    grid-column: 1 / -1;
  }

  .load-detail-history-card .compact-empty {
    padding: 12px;
  }
}

.filters {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 8px;
}

.fields-workspace {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 12px;
}

.field-map-label {
  width: max-content;
  max-width: none;
  padding: 3px 6px;
  color: #173a33;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(23, 58, 51, 0.35);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  pointer-events: none;
}

.field-map-label::before {
  display: none;
}

.field-map-label.inactive {
  color: #44534f;
  background: rgba(238, 241, 240, 0.86);
  border-color: rgba(68, 83, 79, 0.35);
}

.field-map-label.selected {
  color: #fff;
  background: rgba(14, 95, 81, 0.94);
  border-color: #f5b84b;
}

.map-location-control button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  color: #20252b;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

.map-location-control button:hover,
.map-location-control button:focus-visible {
  color: #1f76d2;
  background: #fff;
}

.map-location-control button span {
  font-size: 1.65rem;
  line-height: 1;
  transform: translateY(-1px);
}

.fields-map.field-labels-overview .field-map-label:not(.selected) {
  display: none;
}

.fields-hub {
  display: grid;
  gap: 12px;
}

.workspace-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px;
}

.workspace-header h1 {
  margin: 0;
  font-size: 1.35rem;
}

.workspace-header p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.workspace-tabs {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.workspace-tabs button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  white-space: nowrap;
}

.workspace-tabs button.active {
  color: #fff;
  background: var(--brand);
}

.planning-workspace {
  display: grid;
  grid-template-columns: minmax(240px, 310px) minmax(0, 1fr);
  gap: 12px;
}

.deployment-group-editor {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(280px, 360px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.deployment-field-options {
  display: grid;
  max-height: 520px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
}

.deployment-field-options label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.deployment-field-options [data-field-option].is-filtered-out,
.deployment-field-options [data-field-option][hidden],
.deployment-field-options .deployment-field-empty[hidden] {
  display: none !important;
}

.deployment-field-options input { width: 19px; height: 19px; flex: 0 0 auto; accent-color: var(--brand); }
.deployment-field-options span { display: grid; gap: 2px; min-width: 0; }
.deployment-field-options small { color: var(--muted); }
.deployment-field-options .deployment-field-id { color: var(--text); font-weight: 700; }
.deployment-totals { display: grid; gap: 3px; padding: 10px; background: #f5f8f7; border: 1px solid var(--line); border-radius: 6px; }
.deployment-totals span { color: var(--muted); }
.deployment-name-cell { display: inline-flex; align-items: center; gap: 7px; }
.deployment-color-dot { width: 13px; height: 13px; flex: 0 0 auto; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.deployment-list-table { min-width: 680px; }
.deployment-list-row { cursor: pointer; }
.deployment-list-row:hover td,
.deployment-list-row:focus td,
.deployment-list-row.is-selected td { background: #edf6f3; }
.deployment-list-row:focus { outline: none; }
.deployment-editor-secondary-actions { display: flex; justify-content: flex-end; padding-top: 4px; }
.danger-link {
  min-height: 30px;
  padding: 3px 0;
  color: var(--danger);
  background: transparent;
  border: 0;
  font-weight: 700;
}
.danger-link:hover { text-decoration: underline; }
.deployment-group-editor input[type="color"] { width: 100%; min-height: 44px; padding: 4px; cursor: pointer; }
.deployment-map-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 9px; color: var(--muted); font-size: 0.74rem; }
.deployment-map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.deployment-map-legend i { width: 11px; height: 11px; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 2px; }
.deployment-map-legend i.unassigned { background: #dbe2df; border-style: dashed; }
.deployment-fields-map { height: min(68vh, 620px); min-height: 420px; }
.report-group-stats { margin-top: 14px; }
.report-group-stats h3 { margin: 0 0 7px; font-size: 1rem; }

.report-events-table {
  min-width: 880px;
}

.report-events-table th,
.report-events-table td {
  padding: 6px 8px;
  font-size: 0.79rem;
  vertical-align: middle;
}

.report-events-table td {
  white-space: nowrap;
}

.report-events-table th:nth-child(4),
.report-events-table td:nth-child(4) {
  min-width: 120px;
}

.report-weather {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 150px;
  line-height: 1.2;
  white-space: nowrap;
}

.report-weather small {
  color: var(--muted);
}

.reliability-panel {
  display: grid;
  gap: 14px;
}

.reliability-panel .section-title,
.reliability-panel h3 {
  margin: 0;
}

.reliability-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.reliability-metrics .metric {
  min-height: 72px;
}

.backup-health-panel {
  display: grid;
  gap: 14px;
}

.backup-health-panel .section-title,
.backup-health-panel h3 {
  margin: 0;
}

.backup-policy-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.backup-policy-grid .detail-box {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.backup-policy-grid strong,
.backup-policy-grid small {
  overflow-wrap: anywhere;
}

.compact-backup-note {
  margin: 0;
}

@media (max-width: 760px) {
  .backup-policy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tank-details,
.tank-ledger {
  margin-top: 12px;
}

.tank-level-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin-bottom: 14px;
}

.tank-level-summary.compact {
  grid-template-columns: 1fr;
  margin-bottom: 10px;
}

.tank-specifications {
  margin-bottom: 14px;
}

.tank-specifications .metric {
  min-height: 64px;
}

.tank-level-summary > div:not(.tank-level-track) {
  display: grid;
  gap: 2px;
}

.tank-level-track {
  grid-column: 1 / -1;
  height: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #e8eeec;
}

.tank-level-track span {
  display: block;
  height: 100%;
  min-width: 0;
  background: #2c669d;
}

.tank-movement-form {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(140px, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 12px;
}

.tank-movement-form button {
  min-height: 44px;
  white-space: nowrap;
}

.detected-tank-panel {
  border-left: 4px solid #2c669d;
}

@media (max-width: 980px) {
  .deployment-group-editor { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
  .deployment-map-panel { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .workspace-header > div:first-child {
    display: none;
  }

  .workspace-header {
    display: grid;
    align-items: stretch;
    gap: 8px;
  }

  .workspace-tabs {
    width: 100%;
  }

  .workspace-tabs button {
    padding: 0 8px;
    font-size: 0.84rem;
  }

  .deployment-group-editor { grid-template-columns: 1fr; }
  .deployment-map-panel { grid-column: auto; }
  .deployment-fields-map { min-height: 340px; }

  .deployment-list-panel { padding: 10px; }
  .deployment-list-panel .section-title { margin-bottom: 8px; }
  .deployment-list-panel .section-title button { min-height: 36px; padding: 0 10px; }
  .deployment-list-panel .table-wrap { overflow-x: hidden; }
  .deployment-list-table { min-width: 0; table-layout: fixed; }
  .deployment-list-table th,
  .deployment-list-table td { padding: 7px 6px; font-size: 0.78rem; }
  .deployment-list-table th:first-child { width: 62%; }
  .deployment-list-table th:nth-child(2) { width: 38%; }
  .deployment-list-table th:nth-child(n+3),
  .deployment-list-table td:nth-child(n+3) { display: none; }
  .deployment-list-table .deployment-name-cell { max-width: 100%; }
  .deployment-list-table .deployment-name-cell strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.planning-sidebar {
  align-self: start;
  display: grid;
  gap: 12px;
}

.planning-sidebar .section-title,
.planning-map-panel .section-title {
  margin-bottom: 0;
}

.planning-sidebar button {
  width: 100%;
}

.field-navigator {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 7px;
  min-width: 0;
  min-height: 0;
}

.field-navigator-current {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--info) 55%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--info) 9%, var(--panel));
  box-shadow: inset 3px 0 var(--info);
}

.field-navigator-current small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 750;
}

.field-navigator-current strong {
  overflow: hidden;
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fields-sidebar .field-navigator {
  flex: 1;
}

.field-navigator-search {
  display: grid;
  gap: 5px;
}

.field-navigator-search > label,
.field-navigator-search-label,
.planning-wayline-editor > label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 750;
}

.field-navigator-search > div {
  position: relative;
}

.field-navigator-search input,
.field-navigator-searchbox {
  width: 100%;
  min-height: 42px;
  padding: 8px 50px 8px 11px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
}

.field-navigator-searchbox:empty::before {
  color: var(--muted);
  content: attr(data-placeholder);
  pointer-events: none;
}

.field-navigator-search input:focus,
.field-navigator-searchbox:focus {
  outline: 2px solid color-mix(in srgb, var(--info) 45%, transparent);
  outline-offset: 1px;
  border-color: var(--info);
}

.field-navigator-search span {
  position: absolute;
  top: 50%;
  right: 8px;
  min-width: 28px;
  padding: 3px 6px;
  border-radius: 10px;
  color: var(--info);
  background: #e8f1fb;
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
  transform: translateY(-50%);
  pointer-events: none;
}

.field-navigator-results {
  display: grid;
  align-content: start;
  min-height: 0;
  max-height: 430px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
}

.field-navigator-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 7px 9px;
  color: var(--text);
  text-align: left;
  background: var(--panel);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.field-navigator-item:last-child {
  border-bottom: 0;
}

.field-navigator-item > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.field-navigator-item strong,
.field-navigator-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-navigator-item strong {
  font-size: 0.85rem;
}

.field-navigator-item small {
  color: var(--muted);
  font-size: 0.7rem;
}

.field-navigator-item em {
  padding: 2px 5px;
  border-radius: 4px;
  color: var(--muted);
  background: var(--bg);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 750;
}

.field-navigator-item.active {
  color: var(--text);
  background: #e9f1f8;
  box-shadow: inset 3px 0 var(--info);
}

.field-navigator-item:hover:not(.active) {
  background: color-mix(in srgb, var(--info) 7%, var(--panel));
}

.field-navigator-empty[hidden],
.field-navigator-item[hidden] {
  display: none;
}

.field-navigator.planning .field-navigator-results {
  max-height: 190px;
}

.planning-new-field {
  min-height: 38px;
}

.planning-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.planning-wayline-section {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.planning-wayline-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.78rem;
}

.planning-wayline-heading > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.planning-wayline-heading button {
  width: auto;
  min-height: 30px;
  padding: 0 9px;
}

.planning-wayline-heading span {
  min-width: 24px;
  padding: 2px 7px;
  border-radius: 10px;
  color: var(--info);
  background: #e8f1fb;
  text-align: center;
  font-weight: 800;
}

.planning-wayline-list {
  display: grid;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
}

.planning-wayline-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--text);
  background: #fff;
  text-align: left;
}

.planning-wayline-list button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 750;
}

.planning-wayline-list button small {
  color: var(--muted);
  white-space: nowrap;
}

.planning-wayline-list button.active {
  border-color: #9bbbd7;
  color: var(--text);
  background: #e9f1f8;
  box-shadow: inset 3px 0 var(--info);
}

.planning-wayline-list button.unsaved { border-style: dashed; }

.planning-wayline-editor {
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
}

.planning-wayline-editor > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.planning-wayline-editor input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
}

.planning-wayline-editor button {
  width: auto;
  min-height: 40px;
  white-space: nowrap;
}

.integrated-planning-tools {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.integrated-planning-tools .section-title {
  margin-bottom: 0;
}

.integrated-planning-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.integrated-planning-tools .planning-wayline-list {
  max-height: 210px;
}

.planning-actions-stack {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.planning-actions-stack button,
.planning-coverage-control > button {
  min-width: 0;
  white-space: normal;
}

.planning-export-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.planning-export-buttons button {
  min-width: 0;
}

.unified-field-map {
  width: 100%;
}

.planning-export-fields {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
}

.planning-export-fields summary {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 750;
  list-style: none;
}

.planning-export-fields summary::-webkit-details-marker { display: none; }

.planning-export-fields summary::before {
  content: "+";
  width: 18px;
  color: var(--muted);
  font-size: 1rem;
}

.planning-export-fields[open] summary::before { content: "-"; }

.planning-export-fields summary span {
  min-width: 24px;
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 10px;
  color: var(--info);
  background: #e8f1fb;
  text-align: center;
}

.planning-export-field-list {
  display: grid;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 8px 8px;
  border-top: 1px solid var(--line);
}

.planning-export-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px 8px;
  border-top: 1px solid var(--line);
}

.planning-export-actions button { min-height: 32px; }

.planning-export-fields label {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  min-height: 36px;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.8rem;
}

.planning-export-fields input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--brand);
}

.planning-export-fields label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-coverage-control {
  display: grid;
  gap: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
}

.planning-coverage-control > button { border-radius: 5px 5px 0 0; }

.planning-coverage-control > label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 8px 7px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.planning-coverage-control label span {
  display: grid;
  grid-template-columns: 66px auto;
  align-items: center;
  gap: 5px;
}

.planning-coverage-control input {
  width: 66px;
  min-height: 34px;
  padding: 5px 7px;
}

.planning-coverage-control small { font-size: 0.76rem; }

.planning-ab-handle {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: #fff;
  background: #d62f2f;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  font-size: 0.6rem;
  font-weight: 900;
}

.planning-ab-handle::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
}

.planning-ab-handle span {
  transform: translateY(-11px);
  padding: 1px 3px;
  color: #fff;
  background: #b91f25;
  border-radius: 3px;
  font-size: 0.58rem;
  line-height: 1;
}

.planning-summary {
  min-height: 24px;
  color: var(--brand);
  font-weight: 800;
}

.planning-map {
  height: min(72vh, 700px);
  min-height: 480px;
}

.fields-sidebar {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 158px);
}

.field-list {
  min-height: 0;
  overflow-y: auto;
  border-top: 1px solid var(--line);
}

.field-folder + .field-folder {
  margin-top: 8px;
}

.field-folder-title {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  color: var(--muted);
  background: #f4f7f6;
  border-bottom: 1px solid var(--line);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.field-folder-title span {
  min-width: 24px;
  text-align: right;
}

.field-folder-empty {
  padding: 12px 8px;
  color: var(--muted);
  font-size: 0.82rem;
}

.field-owner-group + .field-owner-group {
  border-top: 1px solid var(--line);
}

.field-owner-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px 5px;
  color: var(--muted);
  background: #f7f9f8;
  font-size: 0.7rem;
}

.field-owner-title strong {
  overflow-wrap: anywhere;
}

.field-owner-title span {
  flex: 0 0 auto;
}

.field-add-button {
  width: 100%;
  margin-bottom: 10px;
}

.field-create-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 10px;
}

.field-create-actions button { width: 100%; }

.fendt-import-preview {
  display: grid;
  gap: 10px;
  border-top: 3px solid var(--brand);
}

.fendt-import-status {
  display: grid;
  gap: 10px;
  border-top: 3px solid var(--info);
}

.fendt-import-status.error {
  border-top-color: var(--danger);
}

.fendt-import-status progress {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  accent-color: var(--brand);
}

.fendt-import-status > p {
  margin: 0;
}

.fendt-import-preview form { display: grid; gap: 10px; }

.field-import-dataset-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  color: var(--text);
  background: color-mix(in srgb, var(--info) 9%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--info) 40%, var(--line));
  border-radius: 6px;
  font-size: 0.8rem;
}

.field-import-dataset-summary span {
  color: var(--muted);
  text-align: right;
}

.field-import-issues {
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--warn) 10%, var(--panel));
}

.field-import-issues summary {
  cursor: pointer;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
}

.field-import-issues > div { display: grid; gap: 5px; margin-top: 8px; }
.field-import-issues p { display: grid; gap: 1px; margin: 0; font-size: 0.76rem; }
.field-import-issues span { color: var(--muted); }

.fendt-import-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.fendt-import-facts span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  background: #f3f7f5;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.fendt-import-facts small { color: var(--muted); font-size: 0.68rem; font-weight: 700; }
.fendt-import-facts strong { overflow-wrap: anywhere; font-size: 0.78rem; }

.fendt-field-comparison {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
}

.field-duplicate-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.field-duplicate-summary > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.field-duplicate-summary span { color: var(--muted); font-size: 0.67rem; font-weight: 700; }
.field-duplicate-summary strong { font-size: 0.84rem; }

.field-import-recommendation {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--ok) 55%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--ok) 10%, var(--panel));
  font-size: 0.82rem;
}

.field-import-recommendation.warn {
  border-color: color-mix(in srgb, var(--warn) 55%, var(--line));
  background: color-mix(in srgb, var(--warn) 10%, var(--panel));
}

.fendt-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.fendt-comparison-grid > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.fendt-comparison-grid > div.recommended {
  border-color: #8dc7b8;
  box-shadow: inset 3px 0 var(--brand-2);
}

.fendt-comparison-grid span,
.fendt-comparison-grid small {
  color: var(--muted);
  font-size: 0.76rem;
}

.fendt-comparison-grid strong { overflow-wrap: anywhere; }

/* Keep the routine import decision on one visible screen. */
.fields-hub .fendt-import-preview {
  gap: 7px;
  padding: 10px;
}

.fields-hub .fendt-import-preview form {
  gap: 7px;
}

.fields-hub .fendt-import-preview form > .grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fields-hub .fendt-import-preview form > .grid.three > :nth-child(3) {
  grid-column: auto;
}

.fields-hub .fendt-import-preview .field-import-dataset-summary {
  padding: 6px 8px;
  font-size: 0.72rem;
}

.fields-hub .fendt-import-preview .fendt-field-comparison {
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
}

.fendt-comparison-details {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
}

.fendt-comparison-details summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 9px;
  cursor: pointer;
  list-style: none;
  font-size: 0.78rem;
  font-weight: 750;
}

.fendt-comparison-details summary::-webkit-details-marker { display: none; }
.fendt-comparison-details summary::before { content: "+"; color: var(--muted); font-size: 1rem; }
.fendt-comparison-details[open] summary::before { content: "-"; }
.fendt-comparison-details summary small { margin-left: auto; color: var(--muted); font-size: 0.68rem; font-weight: 600; }
.fendt-comparison-detail-body { display: grid; gap: 7px; padding: 8px; border-top: 1px solid var(--line); }

.fields-hub .fendt-import-preview .field-duplicate-summary > div {
  padding: 6px 7px;
}

.fields-hub .fendt-import-preview .fendt-comparison-grid > div {
  padding: 7px 8px;
}

.fields-hub .fendt-import-preview .field-import-recommendation {
  padding: 7px 8px;
  font-size: 0.76rem;
}

/* A wider import drawer keeps the full comparison visible without scrolling. */
.fields-hub .fields-main > .fendt-import-preview {
  width: min(900px, calc(100% - 24px));
}

.fields-hub .fendt-import-preview .field-duplicate-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fields-hub .fendt-import-preview .fendt-comparison-grid,
.fields-hub .fendt-import-preview .fendt-field-comparison > .grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fendt-comparison-always-visible {
  padding: 0;
  border: 0;
}

@media (min-width: 841px) {
  .fields-hub .fields-main > .fendt-import-preview {
    overflow: hidden;
  }

}

@media (max-width: 840px) {
  .fields-hub .fendt-import-preview form > .grid.three {
    grid-template-columns: minmax(0, 1fr);
  }

  .fields-hub .fields-main > .fendt-import-preview {
    width: auto;
  }

  .fields-hub .fendt-import-preview .field-duplicate-summary,
  .fields-hub .fendt-import-preview .fendt-comparison-grid,
  .fields-hub .fendt-import-preview .fendt-field-comparison > .grid.two {
    grid-template-columns: minmax(0, 1fr);
  }
}

.fendt-recommendation {
  margin: 0;
  color: var(--brand);
  font-size: 0.84rem;
}

.field-vertex-handle {
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
}

.field-vertex-handle.selected {
  background: #f5b84b;
  box-shadow: 0 0 0 3px rgba(245, 184, 75, 0.45);
  transform: scale(1.5);
}

.field-create-cursor,
.field-create-cursor .leaflet-interactive {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 2V30M2 16H30' stroke='%23fff' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M16 2V30M2 16H30' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='16' r='2.5' fill='%23f5b84b' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") 16 16, crosshair !important;
}

.field-create-cursor .field-vertex-handle {
  cursor: move !important;
}

.field-list-item {
  display: grid;
  width: 100%;
  padding: 10px 8px;
  color: var(--text);
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.field-list-item span {
  color: var(--muted);
  font-size: 0.78rem;
}

.field-list-item.active {
  color: var(--green);
  background: #eaf4f1;
  box-shadow: inset 3px 0 var(--green);
}

.fields-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.tank-picker-row {
  display: grid;
  grid-template-columns: minmax(220px, 420px) auto;
  align-items: end;
  gap: 8px;
  margin-bottom: 10px;
}

.tank-picker-row select {
  min-height: 42px;
  font-weight: 700;
}

.tank-picker-add {
  display: none;
  min-height: 42px;
}

.mobile-fields-toolbar {
  display: none;
}

.fields-map {
  height: min(62vh, 620px);
  min-height: 410px;
  border-radius: 6px;
}

.field-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr)) minmax(220px, 2fr);
  gap: 14px;
}

.field-details > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.field-source strong {
  overflow-wrap: anywhere;
}

.field-details-editable {
  grid-template-columns: repeat(3, minmax(100px, 1fr)) minmax(180px, 1.5fr);
}

.field-edit-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.field-edit-form .field-notes {
  grid-column: 1 / -1;
}

.field-edit-form > .button-row {
  grid-column: 1 / -1;
}

@media (max-width: 840px) {
  .grid.two, .grid.three, .grid.four, .split, .filters, .fields-workspace, .planning-workspace, .reliability-status-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-panels {
    grid-template-columns: 1fr;
  }

  .fields-sidebar { display: none; }

  .integrated-planning-grid {
    grid-template-columns: 1fr;
  }

  .tank-picker-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .tank-picker-add {
    display: block;
  }

  .mobile-fields-toolbar {
    display: grid;
    gap: 9px;
    padding: 10px 12px;
  }

  .field-navigator.mobile .field-navigator-results {
    max-height: 190px;
  }

  .mobile-field-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .mobile-field-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
  }

  .mobile-field-search-row .field { gap: 4px; }

  .mobile-field-search-row .status {
    min-width: 38px;
    min-height: 44px;
    justify-content: center;
    border-radius: 6px;
  }

  .mobile-field-picker-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: 8px;
  }

  .mobile-field-picker-row .field { gap: 4px; }

  .mobile-field-picker-row select {
    min-height: 44px;
    font-weight: 700;
  }

  .mobile-field-edit-form {
    display: grid;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }

  .mobile-field-name-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
  }

  .mobile-field-name-row button {
    min-height: 44px;
    padding: 0 14px;
  }

  .mobile-field-edit-form textarea {
    min-height: 58px;
    resize: vertical;
  }

  .mobile-add-field {
    min-height: 44px;
    padding: 0 12px;
  }

  .mobile-import-field {
    min-height: 44px;
    padding: 0 10px;
  }

  .field-navigator.planning .field-navigator-results {
    max-height: 170px;
  }

  .planning-export-buttons {
    grid-template-columns: 1fr;
  }

  .fendt-import-facts { grid-template-columns: 1fr 1fr; }
  .field-duplicate-summary { grid-template-columns: 1fr 1fr; }

  .mobile-field-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }

  .mobile-field-summary > span:not(.status) {
    display: grid;
    gap: 1px;
    min-width: 0;
  }

  .mobile-field-summary small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
  }

  .mobile-field-summary strong {
    overflow: hidden;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fields-map-panel .section-title {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
  }

  .fields-map-panel .section-title > .button-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .fields-map-panel .section-title button {
    width: 100%;
    min-height: 34px;
    padding: 0 8px;
    font-size: 0.76rem;
  }

  .fields-map-panel [data-action="delete-field-point"]:disabled {
    display: none;
  }

  .field-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-edit-form {
    display: none;
    grid-template-columns: 1fr;
  }

  .field-edit-form .button-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .field-edit-form .button-row .secondary {
    grid-column: 1 / -1;
  }

  .topbar {
    align-items: flex-start;
  }

  .topbar .button-row {
    justify-content: flex-end;
  }

  .tank-movement-form {
    grid-template-columns: 1fr 1fr;
  }

  .tank-movement-form button {
    grid-column: 1 / -1;
  }
}

@media (min-width: 521px) and (max-width: 1100px) {
  .hero-status > .record-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    padding: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
  }

  .hero-status > .record-facts .metric {
    min-height: 50px;
    justify-content: center;
    padding: 7px 10px;
    background: var(--panel);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

@media (min-width: 841px) and (max-width: 1100px) and (orientation: landscape) {
  .hero-status {
    grid-template-columns: minmax(270px, 0.8fr) minmax(0, 1.2fr);
    align-items: stretch;
    gap: 8px;
  }

  .hero-status > * {
    grid-column: 1 / -1;
  }

  .hero-status > .panel:first-child {
    grid-column: 1;
    grid-row: 1;
    padding: 12px 14px;
  }

  .hero-status > .record-facts {
    grid-column: 2;
    grid-row: 1;
  }

  .hero-status .deployment-number {
    font-size: 2.5rem;
  }

  .hero-status > .admin-record-vehicle {
    grid-column: 1;
    grid-row: 2;
  }

  .hero-status > .admin-record-vehicle .account-vehicle-control {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .hero-status > .record-action-with-vehicle {
    grid-column: 2;
    grid-row: 2;
    min-height: 54px;
  }

}

@media (max-width: 520px) {
  .main {
    padding: 10px;
  }

  .today-events {
    padding: 9px;
  }

  .hero-status .today-events .table-wrap {
    overflow-x: hidden;
  }

  .hero-status .today-events .compact-table {
    min-width: 0;
    table-layout: fixed;
  }

  .hero-status .today-events .compact-table th,
  .hero-status .today-events .compact-table td {
    padding: 5px 4px;
    font-size: 0.72rem;
    overflow-wrap: anywhere;
  }

  .hero-status .today-events .compact-table .today-load-status {
    display: none;
  }

  .hero-status .today-events .compact-table .load-remove-cell {
    display: table-cell;
    width: 34px;
    padding-inline: 2px;
  }

  .latest-records-table {
    min-width: 0;
    table-layout: fixed;
  }

  .latest-records-table th,
  .latest-records-table td {
    padding: 5px 4px;
    font-size: 0.72rem;
    overflow-wrap: anywhere;
  }

  .latest-records-table th:nth-child(4),
  .latest-records-table td:nth-child(4),
  .latest-records-table th:nth-child(5),
  .latest-records-table td:nth-child(5) {
    display: none;
  }

  .latest-records-table th:first-child { width: 19%; }
  .latest-records-table th:nth-child(2) { width: 25%; }
  .latest-records-table th:nth-child(3) { width: 20%; }
  .latest-records-table th:nth-child(6) { width: 19%; }
  .latest-records-table th:last-child { width: 17%; }

  .latest-records-table .ghost.compact {
    min-height: 28px;
    padding: 4px 5px;
    font-size: 0.68rem;
  }

  .latest-records-table .compact-driver,
  .admin-events-table .compact-driver {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.63rem;
    font-weight: 600;
    line-height: 1.15;
  }

  .admin-events-wrap {
    overflow-x: hidden;
  }

  .admin-events-table {
    min-width: 0;
    table-layout: fixed;
  }

  .admin-events-table th,
  .admin-events-table td {
    padding: 5px 3px;
    font-size: 0.7rem;
    overflow-wrap: anywhere;
  }

  .admin-events-table .load-day-divider td {
    display: table-cell;
    width: auto;
    padding: 6px 7px;
    font-size: 0.72rem;
  }

  .load-day-divider td > div { gap: 6px; }

  .load-day-divider strong {
    padding: 2px 5px;
    font-size: 0.66rem;
  }

  .admin-events-table th:nth-child(4),
  .admin-events-table td:nth-child(4),
  .admin-events-table th:nth-child(5),
  .admin-events-table td:nth-child(5),
  .admin-events-table th:nth-child(6),
  .admin-events-table td:nth-child(6) {
    display: none;
  }

  .admin-events-table th:first-child { width: 20%; }
  .admin-events-table th:nth-child(2) { width: 30%; }
  .admin-events-table th:nth-child(3) { width: 42%; }
  .admin-events-table th:nth-child(7) { width: 8%; }

  .admin-events-table.own-load-remove-enabled th:nth-child(3) { width: 35%; }
  .admin-events-table.own-load-remove-enabled .load-remove-cell { width: 7%; }

  .sync-indicator { width: 22px; height: 22px; }

  .admin-events-table .status {
    min-height: 22px;
    padding: 3px 4px;
    font-size: 0.63rem;
    line-height: 1.1;
    white-space: normal;
  }

  .admin-events-table .compact-date {
    font-size: 0.63rem;
  }

  .tank-level-summary,
  .tank-movement-form {
    grid-template-columns: 1fr;
  }

  .tank-movement-form button {
    grid-column: auto;
  }
}

/* Retained as a reference for the original legacy palette. Theme selection is
   now driven by data-theme below, so operating-system dark mode cannot leak
   into an explicitly light app. */
@media (max-width: 0px) {
  :root {
    color-scheme: dark;
    --bg: #121417;
    --panel: #1a1d22;
    --text: #e7e9ed;
    --muted: #9da3ad;
    --line: #343943;
    --brand: #78afe7;
    --brand-2: #356fa8;
    --danger: #e27676;
    --warn: #e1b75a;
    --ok: #72c08a;
    --info: #82b5e4;
    --shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  }

  body { background: var(--bg); }

  .topbar {
    background: rgba(18, 20, 23, 0.94);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
  }

  .nav,
  .nav-menu-items,
  .tank-override,
  table,
  td select,
  .empty,
  .event-card,
  .workspace-tabs,
  .field-navigator-item,
  .planning-wayline-list button,
  .fendt-comparison-grid > div {
    background: var(--panel);
  }

  .nav button.active,
  .nav-menu-trigger.active,
  .workspace-tabs button.active,
  .primary-action {
    color: #f7f9fc;
    background: #2f6fa8;
  }

  .nav button:hover:not(.active),
  .nav-menu-items button:hover,
  .workspace-tabs button:hover:not(.active) {
    color: var(--text);
    background: #252a31;
  }

  .ghost,
  .status,
  .field .vehicle-check-list label,
  .map-selection-bar,
  .deployment-totals,
  .fendt-import-facts span {
    color: var(--text);
    background: #24282f;
  }

  .secondary { background: #356fa8; }
  .warn { color: #211900; background: #d8ad4d; }

  .status.ok { color: #91d7a5; background: #203a2a; }
  .status.warn { color: #f0cc79; background: #3c331d; }
  .status.danger { color: #f19a9a; background: #402626; }
  .status.info,
  .field-navigator-search span,
  .planning-wayline-heading span,
  .planning-export-fields summary span { color: #9bc8ef; background: #203446; }

  .sync-indicator.ok { background: #203a2a; }
  .sync-indicator.warn { color: #f0cc79; background: #3c331d; }
  .sync-indicator.danger { color: #f19a9a; background: #402626; }
  .sync-indicator.ok::before { border-color: #72c08a; }

  .field input,
  .field select,
  .field textarea,
  .planning-coverage-control input,
  .tank-picker-row select {
    color: var(--text);
    background: #121417;
    border-color: var(--line);
  }

  input::placeholder,
  textarea::placeholder { color: #777f8b; }

  option { color: var(--text); background: #1a1d22; }

  .admin-events-table .load-day-divider td,
  .admin-events-table .load-row:hover td,
  .admin-events-table .load-row:focus td,
  .deployment-list-row:hover td,
  .deployment-list-row:focus td,
  .deployment-list-row.is-selected td,
  .planning-wayline-list button.active,
  .field-navigator-item.active,
  .field-list-item.active {
    color: var(--text);
    background: #25384d;
  }

  .load-day-divider strong { color: #b7d6f4; background: #2b3d50; }

  .field-folder-title,
  .field-owner-title {
    color: var(--muted);
    background: #16191e;
  }

  .planning-wayline-list,
  .planning-coverage-control,
  .fendt-field-comparison,
  .map-canvas,
  .leaflet-map,
  .tank-level-track {
    background: #101216;
  }

  .field-map-label {
    color: #e1e6ed;
    background: rgba(25, 29, 35, 0.92);
    border-color: rgba(175, 184, 197, 0.42);
  }

  .field-map-label.inactive {
    color: #a6b1ad;
    background: rgba(43, 47, 53, 0.9);
    border-color: rgba(166, 177, 173, 0.35);
  }

  .field-map-label.selected {
    color: #fff;
    background: rgba(40, 102, 157, 0.95);
    border-color: #e2b75b;
  }

  .leaflet-tile-pane img {
    filter: brightness(0.76) contrast(0.94) saturate(0.82);
  }

  .leaflet-control-zoom a,
  .leaflet-control-layers {
    color: var(--text);
    background: #20242a;
    border-color: var(--line);
  }

  .leaflet-control-zoom a:hover { background: #2a3038; }

  .leaflet-control-attribution {
    color: var(--muted);
    background: rgba(18, 20, 23, 0.8);
  }

  .leaflet-control-attribution a { color: var(--brand); }

  .vertex-handle {
    color: #c5ddf5;
    background: #191d23;
    border-color: #5a9bd5;
  }

  .deployment-color-dot,
  .field-vertex-handle,
  .planning-ab-handle { border-color: #dce7e2; }

  .toast-item { background: #242a33; }

  * {
    scrollbar-color: #555c67 #16191e;
  }

  ::selection { color: #f7f9fc; background: #2f6fa8; }
}

/* The redesigned app is deliberately light. Prevent legacy system-dark-mode
   accents from leaking into the Fields workspace. */
.record-preview-shell .fields-hub .leaflet-tile-pane img {
  filter: none;
}

.record-preview-shell .fields-hub .field-navigator-search span {
  color: #24773a;
  background: #eaf6ec;
}

.record-preview-shell .fields-hub .field-navigator-owner-title,
.record-preview-shell .fields-hub .field-owner-title {
  color: #5f6e66;
  background: #f6f9f7;
  border-color: #e3e9e5;
}

.record-preview-shell .fields-hub .field-navigator-item.active {
  color: #183d24;
  background: #edf8ef;
  box-shadow: inset 3px 0 #2a9840;
}

.record-preview-shell .fields-hub .field-navigator-results {
  border-color: #dfe6e1;
  background: #f7f9f7;
  scrollbar-width: thin;
  scrollbar-color: #a8b8ad #f2f5f3;
}

.record-preview-shell .fields-hub .field-navigator-results::-webkit-scrollbar {
  width: 8px;
}

.record-preview-shell .fields-hub .field-navigator-results::-webkit-scrollbar-track {
  background: #f2f5f3;
}

.record-preview-shell .fields-hub .field-navigator-results::-webkit-scrollbar-thumb {
  border: 2px solid #f2f5f3;
  border-radius: 999px;
  background: #a8b8ad;
}

.record-preview-shell .fields-hub .leaflet-control-zoom a,
.record-preview-shell .fields-hub .leaflet-control-layers {
  color: #26352d;
  background: #fff;
  border-color: #dbe4de;
}

.record-preview-shell .fields-hub .leaflet-control-zoom a:hover {
  background: #f1f7f2;
}

@media (max-width: 540px) {
  .main {
    padding: 8px;
  }

  .panel {
    padding: 13px;
  }

  .field-map-label {
    padding: 2px 4px;
    font-size: 0.64rem;
  }

  .load-detail-header {
    align-items: flex-start;
    padding: 11px 12px;
  }

  .load-detail-header .compact-actions {
    justify-content: flex-end;
  }

  .load-detail-editor {
    padding: 12px;
  }

  .load-detail-editor-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .load-detail-editor-notes {
    margin-top: 9px;
  }

  .load-detail-editor-actions > * {
    flex: 1;
  }

  .load-detail-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .detail-wide {
    grid-column: auto;
  }

  .detail-box {
    padding: 10px 12px;
  }

  .detail-box h3 {
    padding-bottom: 6px;
    font-size: 0.88rem;
  }

  .detail-facts,
  .record-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-fact {
    padding: 7px 0 5px;
  }

  .detail-fact span {
    font-size: 0.66rem;
  }

  .detail-fact strong {
    font-size: 0.8rem;
  }

  .topbar {
    align-items: center;
    padding: 7px 9px;
  }

  .topbar .status {
    min-height: 30px;
    padding: 0 8px;
  }

  .topbar .ghost {
    min-height: 34px;
    padding: 0 10px;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
  }

  .app-brand-logo {
    flex-basis: 32px;
  }

  .brand p {
    display: none;
  }

  .nav {
    gap: 2px;
    padding: 4px 8px;
  }

  .nav button {
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.86rem;
  }

  .hero-status {
    gap: 7px;
  }

  .hero-status > .panel:first-child {
    padding: 10px 12px;
  }

  .hero-status > .panel:first-child .section-title {
    margin-bottom: 5px;
  }

  .hero-status > .panel:first-child .section-title h2 {
    font-size: 1rem;
  }

  .hero-status .deployment-number {
    font-size: 1.85rem;
    line-height: 1;
  }

  .hero-status .deployment-override-row {
    display: inline-flex;
    vertical-align: top;
    margin-top: 6px;
    margin-right: 5px;
  }

  .hero-status .deployment-override-row:has(.deployment-override) {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
  }

  .hero-status .deployment-override-row button {
    min-height: 32px;
    padding: 0 10px;
  }

  .hero-status > .grid.three {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
  }

  .hero-status > .record-facts {
    overflow: hidden;
    padding: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
  }

  .hero-status > .record-facts .metric:nth-child(1) { grid-column: 1; grid-row: 1; }
  .hero-status > .record-facts .metric:nth-child(2) { grid-column: 2 / 5; grid-row: 1; }
  .hero-status > .record-facts .metric:nth-child(3) { grid-column: 1; grid-row: 2; }
  .hero-status > .record-facts .metric:nth-child(4) { grid-column: 2; grid-row: 2; }
  .hero-status > .record-facts .metric:nth-child(5) { grid-column: 1; grid-row: 3; }
  .hero-status > .record-facts .metric:nth-child(6) { grid-column: 2 / 4; grid-row: 3; }
  .hero-status > .record-facts .metric:nth-child(7) { grid-column: 4; grid-row: 3; }
  .hero-status > .record-facts .metric:nth-child(8) { grid-column: 3 / 5; grid-row: 2; }

  .hero-status > .record-facts.compact-record-facts {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .hero-status > .record-facts.compact-record-facts .metric:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
  .hero-status > .record-facts.compact-record-facts .metric:nth-child(2) { grid-column: 4 / 7; grid-row: 1; }
  .hero-status > .record-facts.compact-record-facts .metric:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  .hero-status > .record-facts.compact-record-facts .metric:nth-child(4) { grid-column: 3 / 5; grid-row: 2; }
  .hero-status > .record-facts.compact-record-facts .metric:nth-child(5) { grid-column: 5 / 7; grid-row: 2; }

  .hero-status > .record-facts .metric {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--panel);
  }

  .hero-status > .grid.three .metric {
    min-height: 42px;
    padding: 5px 7px;
    justify-content: center;
  }

  .hero-status > .grid.three .metric span {
    font-size: 0.68rem;
  }

  .hero-status > .grid.three .metric strong {
    font-size: 0.86rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-status > .grid.three .tank-status-metric {
    justify-content: flex-start;
  }

  .tank-status-actions {
    margin-top: 2px;
  }

  .hero-status .primary-action {
    min-height: 56px;
    font-size: 1rem;
  }

  .hero-status > .admin-record-vehicle {
    min-height: 48px;
    padding: 7px;
  }

  .hero-status > .admin-record-vehicle .account-vehicle-control {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .hero-status > .admin-record-vehicle label {
    font-size: 0.66rem;
  }

  .hero-status > .admin-record-vehicle select {
    min-height: 36px;
  }

  .hero-status .record-block-reason {
    margin: -2px 0 0;
    font-size: 0.75rem;
  }

  .demo-users {
    grid-template-columns: 1fr;
  }

  .brand h1 {
    font-size: 0.92rem;
  }

  .fields-map {
    height: 52vh;
    min-height: 360px;
  }

  .planning-map {
    height: 58vh;
    min-height: 380px;
  }
}

/* Keep the missed-load form compact after the generic mobile grid rules. */
@media (max-width: 840px) {
  .missed-load-datetime.grid.two {
    grid-template-columns: minmax(0, 1.35fr) minmax(104px, 0.9fr);
    gap: 8px;
  }
}

@media (max-width: 540px) {
  .missed-load-panel {
    padding: 12px;
  }

  .missed-load-panel .section-title h2 {
    font-size: 1.05rem;
  }

  .missed-load-form {
    gap: 8px;
  }

  .missed-load-form .field label {
    font-size: 0.7rem;
  }

  .missed-load-notes textarea {
    min-height: 58px;
  }

  .missed-load-form button[type="submit"] {
    min-height: 44px;
  }
}

/* Keep these final so legacy map sizing cannot reintroduce page scrolling. */
.fields-hub .fields-workspace {
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 0;
}

.fields-hub .fields-sidebar {
  height: 100%;
  max-height: none;
}

.fields-hub .fields-map,
.fields-hub .field-map-workspace .fields-map,
.fields-hub .planning-map {
  height: 100%;
  min-height: 0;
  max-height: none;
}

@media (max-width: 840px) {
  .fields-hub .fields-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .fields-hub .field-map-inspector {
    position: absolute;
    top: auto;
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    max-height: 43%;
    margin: 0;
  }
}

/* iPad landscape keeps the map dominant without making the field rail cramped. */
@media (min-width: 841px) and (max-width: 1180px) {
  .fields-hub .fields-workspace {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}

/* Portrait tablets need map space more than a phone-sized stack of controls. */
@media (min-width: 600px) and (max-width: 840px) and (orientation: portrait) {
  .fields-hub .mobile-fields-toolbar {
    top: 52px;
    right: auto;
    width: min(348px, calc(100% - 16px));
    gap: 6px;
    padding: 6px;
    background: color-mix(in srgb, var(--panel) 94%, transparent);
  }

  .fields-hub .mobile-fields-toolbar .field-navigator {
    gap: 4px;
  }

  .fields-hub .mobile-fields-toolbar .field-navigator-search-label {
    display: none;
  }

  .fields-hub .mobile-fields-toolbar .field-navigator-searchbox {
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .fields-hub .mobile-fields-toolbar .field-navigator-results {
    position: absolute;
    top: 44px;
    right: 6px;
    left: 6px;
    max-height: min(42dvh, 360px);
    box-shadow: var(--shadow);
  }

  .fields-hub .mobile-field-actions {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .fields-hub .mobile-field-actions button {
    min-height: 34px;
    padding: 0 8px;
    font-size: 0.76rem;
  }

  .fields-hub .field-map-inspector {
    padding: 8px 10px;
    max-height: none;
    overflow: visible;
  }

  .fields-hub .field-inspector-head h3 {
    font-size: 0.92rem;
  }

  .fields-hub .field-inspector-head p {
    font-size: 0.7rem;
  }

  .fields-hub .field-inspector-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 7px;
    margin: 6px 0;
  }

  .fields-hub .field-inspector-facts span {
    padding: 3px 0;
  }

  .fields-hub .field-inspector-facts small {
    font-size: 0.61rem;
  }

  .fields-hub .field-inspector-facts strong {
    font-size: 0.7rem;
  }

  .fields-hub .field-inspector-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .fields-hub .field-inspector-actions > button,
  .fields-hub .field-inspector-details > summary {
    min-height: 32px;
    padding: 0 9px;
    font-size: 0.74rem;
  }

  .fields-hub .field-inspector-details[open] {
    max-height: min(44dvh, 410px);
    overflow: auto;
  }
}

/* Keep deployment field selection visible beside, rather than underneath, the editor. */
@media (min-width: 841px) {
  .deployment-editor-dock {
    width: min(680px, calc(100% - 92px));
    grid-template-columns: minmax(250px, 0.9fr) minmax(300px, 1.1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    background: var(--panel);
  }

  .deployment-editor-dock > .deployment-field-picker {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-height: 0;
    padding-right: 10px;
    border-right: 1px solid var(--line);
  }

  .deployment-editor-dock > .deployment-editor-form {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 3px;
  }

  .deployment-editor-dock > .deployment-save-button {
    grid-column: 2;
    grid-row: 2;
  }

  .deployment-field-picker .deployment-field-options {
    padding-right: 3px;
  }
}

/* Compact deployment navigation on touch layouts; show the full list only when needed. */
@media (max-width: 840px) {
  .deployments-sidebar {
    height: auto;
    grid-template-rows: auto auto;
    gap: 6px;
    overflow: visible;
  }

  .deployments-sidebar .deployment-navigator-results {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    display: none;
    max-height: min(42dvh, 360px);
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 7px;
    box-shadow: var(--shadow);
    background: var(--panel);
  }

  .deployments-sidebar:focus-within .deployment-navigator-results {
    display: grid;
  }

  .deployment-map-toolbar {
    display: none;
  }

  .deployment-editor-dock {
    max-height: 40%;
  }
}

/* Mobile deployment workspace: the map stays clear until editing is intentional. */
.deployment-mobile-summary { display: none; }
.mobile-field-menu-trigger,
.mobile-deployment-menu-trigger { display: none; }
.mobile-fields-menu-body,
.deployment-mobile-menu-body { display: contents; }

@media (max-width: 840px) {
  .deployment-mobile-summary {
    position: absolute;
    z-index: 640;
    right: 8px;
    bottom: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    color: var(--text);
    background: color-mix(in srgb, var(--panel) 96%, transparent);
    border: 1px solid var(--line);
    border-radius: 7px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
  }

  .deployment-mobile-summary > div { display: grid; min-width: 0; gap: 2px; }
  .deployment-mobile-summary strong,
  .deployment-mobile-summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .deployment-mobile-summary strong { font-size: 0.86rem; }
  .deployment-mobile-summary small { color: var(--muted); font-size: 0.68rem; }
  .deployment-mobile-summary button { flex: 0 0 auto; min-height: 32px; }

  .deployment-editor-dock[data-editor-open="false"] { display: none; }
  .deployment-editor-dock[data-editor-open="true"] { top: auto; right: 8px; bottom: 8px; left: 8px; width: auto; height: min(68dvh, 620px); max-height: calc(100% - 16px); padding: 9px; overflow: hidden; }
  .deployment-map-stage:has(.deployment-editor-dock[data-editor-open="true"]) .deployment-mobile-summary { display: none; }

  .deployment-editor-dock[data-editor-open="true"][data-deployment-dock-tab="details"] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; }
  .deployment-editor-dock[data-editor-open="true"][data-deployment-dock-tab="details"] > .deployment-editor-form { display: grid; min-height: 0; overflow-y: auto; padding-right: 2px; }
  .deployment-editor-dock[data-editor-open="true"][data-deployment-dock-tab="details"] > .deployment-field-picker { display: none; }
  .deployment-editor-dock[data-editor-open="true"][data-deployment-dock-tab="details"] > .deployment-save-button { display: block; margin: 0; }

  .deployment-editor-dock[data-editor-open="true"][data-deployment-dock-tab="fields"] { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
  .deployment-editor-dock[data-editor-open="true"][data-deployment-dock-tab="fields"] > .deployment-editor-form,
  .deployment-editor-dock[data-editor-open="true"][data-deployment-dock-tab="fields"] > .deployment-save-button { display: none; }
  .deployment-editor-dock[data-editor-open="true"][data-deployment-dock-tab="fields"] > .deployment-field-picker { display: grid; min-height: 0; }

  .deployment-mobile-dock-tabs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; margin: 0; }
  .deployment-editor-close { display: grid; place-items: center; min-height: 32px; padding: 0; color: var(--muted); background: transparent; border: 0; border-radius: 5px; font-size: 1.3rem; line-height: 1; }
  .deployment-editor-close:hover { color: var(--text); background: var(--bg); }
}

/* Phone controls use the map as the primary surface, not a backdrop for forms. */
@media (max-width: 599px) {
  .fields-hub .mobile-fields-toolbar {
    top: 104px;
    right: 8px;
    left: 8px;
    display: block;
    padding: 6px;
  }

  .fields-hub .mobile-fields-toolbar .field-navigator { min-width: 0; gap: 0; }
  .fields-hub .mobile-fields-toolbar .field-navigator-search-label { display: none; }
  .fields-hub .mobile-fields-toolbar .field-navigator-searchbox { min-height: 38px; padding: 7px 118px 7px 10px; }
  .fields-hub .mobile-fields-toolbar .field-navigator-results { top: 44px; right: 6px; left: 6px; max-height: min(36dvh, 300px); box-shadow: var(--shadow); }
  .fields-hub .mobile-field-actions { position: absolute; top: 6px; right: 6px; display: grid; grid-template-columns: repeat(2, 38px); gap: 5px; }
  .fields-hub .mobile-field-actions button { width: 38px; min-height: 38px; padding: 0; font-size: 0; }
  .fields-hub .mobile-field-actions button::before { font-size: 1.35rem; line-height: 1; }
  .fields-hub .mobile-add-field::before { content: "+"; }
  .fields-hub .mobile-import-field::before { content: "⇩"; }

  .field-map-stage:has(.field-map-mode-dock) .field-map-toolbar {
    top: 58px;
    right: 8px;
    left: auto;
    width: auto;
  }

  .field-map-toolbar-actions {
    padding: 3px;
    border-radius: 0 0 7px 7px;
  }

  .field-map-mode-dock {
    border-radius: 7px 7px 0 0;
  }

  .deployments-sidebar {
    top: 8px;
    left: 52px;
    width: min(248px, calc(100% - 60px));
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    padding: 6px;
  }

  .deployment-add-button {
    width: 38px;
    min-height: 38px;
    padding: 0;
    font-size: 0;
  }

  .deployment-add-button::before { content: "+"; font-size: 1.35rem; line-height: 1; }
  .deployment-navigator-search input { min-height: 38px; padding: 7px 10px; }
  .deployments-sidebar .deployment-navigator-results { top: calc(100% + 6px); }

  .deployment-editor-dock[data-editor-open="true"] {
    height: min(64dvh, 590px);
    padding: 8px;
  }

  .deployment-editor-dock[data-editor-open="true"] .deployment-editor-head h2 { font-size: 0.98rem; }
  .deployment-editor-dock[data-editor-open="true"] .deployment-editor-head p { font-size: 0.7rem; }
  .deployment-editor-dock[data-editor-open="true"] .deployment-editor-basics,
  .deployment-editor-dock[data-editor-open="true"] .deployment-editor-options { gap: 6px; }
  .deployment-editor-dock[data-editor-open="true"] .deployment-totals { padding: 7px; }
}

/* Explicit phone drawers replace focus-dependent dropdowns. */
@media (max-width: 599px) {
  .fields-hub .mobile-fields-toolbar {
    top: 108px;
    right: auto;
    left: 8px;
    width: auto;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .mobile-field-menu-trigger,
  .mobile-deployment-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 132px;
    min-height: 38px;
    padding: 0 10px;
    color: var(--text);
    background: color-mix(in srgb, var(--panel) 96%, transparent);
    border: 1px solid var(--line);
    border-radius: 7px;
    box-shadow: var(--shadow);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 750;
    backdrop-filter: blur(10px);
  }

  .mobile-field-menu-trigger strong,
  .mobile-deployment-menu-trigger strong {
    min-width: 25px;
    padding: 2px 6px;
    color: #b7d6f4;
    background: #203446;
    border-radius: 10px;
    font-size: 0.66rem;
    text-align: center;
  }

  .mobile-fields-menu-body,
  .deployment-mobile-menu-body { display: none; }

  .mobile-fields-toolbar[data-mobile-menu-open="true"] .mobile-fields-menu-body {
    position: absolute;
    top: 44px;
    left: 0;
    display: grid;
    width: min(360px, calc(100vw - 16px));
    max-height: min(56dvh, 470px);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 7px;
    padding: 8px;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 7px;
    box-shadow: var(--shadow);
  }

  .mobile-fields-toolbar[data-mobile-menu-open="true"] .field-navigator.mobile {
    display: grid;
    min-height: 0;
    overflow: hidden;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .mobile-fields-toolbar[data-mobile-menu-open="true"] .field-navigator.mobile .field-navigator-results {
    position: static;
    display: grid;
    max-height: none;
    box-shadow: none;
  }

  .mobile-fields-toolbar[data-mobile-menu-open="true"] .mobile-field-actions {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .mobile-fields-toolbar[data-mobile-menu-open="true"] .mobile-field-actions button {
    width: auto;
    min-height: 36px;
    padding: 0 8px;
    font-size: 0.76rem;
  }

  .mobile-fields-toolbar[data-mobile-menu-open="true"] .mobile-field-actions button::before { display: none; }

  .field-map-stage:has(.mobile-fields-toolbar[data-mobile-menu-open="true"]) .field-map-inspector {
    display: none;
  }

  .deployments-sidebar {
    top: 8px;
    left: 52px;
    width: auto;
    display: block;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  .deployments-sidebar[data-mobile-menu-open="true"] .deployment-mobile-menu-body {
    position: absolute;
    top: 44px;
    left: 0;
    display: grid;
    width: min(350px, calc(100vw - 60px));
    max-height: min(58dvh, 480px);
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 7px;
    padding: 8px;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 7px;
    box-shadow: var(--shadow);
  }

  .deployments-sidebar[data-mobile-menu-open="true"] .section-title { display: none; }
  .deployments-sidebar[data-mobile-menu-open="true"] .deployment-add-button { width: 100%; min-height: 36px; padding: 0 10px; font-size: 0.76rem; }
  .deployments-sidebar[data-mobile-menu-open="true"] .deployment-add-button::before { display: none; }
  .deployments-sidebar[data-mobile-menu-open="true"] .deployment-navigator-results { position: static; display: grid; max-height: none; box-shadow: none; }
}

/* iPad deployment workspace: one solid control layer at a time. */
@media (min-width: 600px) and (max-width: 840px) {
  .deployments-sidebar {
    top: 8px;
    left: 52px;
    z-index: 700;
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  .mobile-deployment-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 160px;
    min-height: 38px;
    padding: 0 10px;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 7px;
    box-shadow: var(--shadow);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 750;
  }

  .mobile-deployment-menu-trigger strong {
    min-width: 25px;
    padding: 2px 6px;
    color: #b7d6f4;
    background: #203446;
    border-radius: 10px;
    font-size: 0.66rem;
    text-align: center;
  }

  .deployment-mobile-menu-body { display: none; }

  .deployments-sidebar[data-mobile-menu-open="true"] .deployment-mobile-menu-body {
    position: absolute;
    top: 44px;
    left: 0;
    display: grid;
    width: min(360px, calc(100vw - 60px));
    max-height: min(62dvh, 560px);
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 7px;
    padding: 8px;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 7px;
    box-shadow: var(--shadow);
  }

  .deployments-sidebar[data-mobile-menu-open="true"] .section-title { display: none; }
  .deployments-sidebar[data-mobile-menu-open="true"] .deployment-add-button { width: 100%; min-height: 36px; }
  .deployments-sidebar[data-mobile-menu-open="true"] .deployment-navigator-results {
    position: static;
    display: grid;
    max-height: none;
    min-height: 0;
    box-shadow: none;
  }

  .deployments-workspace:has(.deployments-sidebar[data-mobile-menu-open="true"]) .deployment-mobile-summary {
    display: none;
  }
}

@media (max-width: 1180px) {
  .deployment-mobile-summary {
    position: absolute;
    z-index: 640;
    right: 64px;
    bottom: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 7px;
    box-shadow: var(--shadow);
  }

  .deployment-mobile-summary > div { display: grid; min-width: 0; gap: 2px; }
  .deployment-mobile-summary strong,
  .deployment-mobile-summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .deployment-mobile-summary strong { font-size: 0.86rem; }
  .deployment-mobile-summary small { color: var(--muted); font-size: 0.68rem; }
  .deployment-mobile-summary button { flex: 0 0 auto; min-height: 32px; }
  .deployment-map-stage:has(.deployment-editor-dock[data-editor-open="true"]) .deployment-mobile-summary { display: none; }
}

@media (min-width: 841px) and (max-width: 1180px) {
  .deployment-editor-dock[data-editor-open="false"] { display: none; }
}

.deployment-editor-dock[data-editor-open="true"] {
  background: var(--panel);
}
/* Land application analysis */
.land-analysis-page {
  display: grid;
  gap: 12px;
  width: min(100%, 1540px);
  margin-inline: auto;
}

.land-analysis-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.land-analysis-heading h1,
.land-analysis-heading p,
.land-analysis-detail h3 { margin: 0; }
.land-analysis-heading h1 { font-size: 1.35rem; }
.land-analysis-heading p { margin-top: 3px; color: var(--muted); font-size: 0.82rem; }

.land-analysis-controls {
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr);
  align-items: end;
  gap: 10px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.land-period-tabs {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.land-period-tabs button {
  min-height: 34px;
  padding: 6px 10px;
  color: var(--muted);
  background: transparent;
  border-radius: 5px;
  font-weight: 700;
  white-space: nowrap;
}

.land-period-tabs button.active { color: #fff; background: var(--info); }

.land-analysis-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px;
  min-width: 0;
}

.land-analysis-search label {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.land-analysis-search input,
.land-custom-dates input,
.land-limit-editor input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 7px 9px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.land-custom-dates {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(140px, 200px) auto;
  align-items: end;
  gap: 8px;
}
.land-custom-dates[hidden] { display: none; }
.land-custom-dates .field { gap: 3px; }

.land-analysis-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.land-analysis-summary > div,
.land-detail-facts > div {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 76px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.land-analysis-summary > div.attention { border-color: #b47b24; }
.land-analysis-summary span,
.land-detail-facts span,
.land-compliance-panel > div > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}
.land-analysis-summary strong { margin-top: 2px; font-size: 1.35rem; }
.land-analysis-summary small,
.land-detail-facts small { color: var(--muted); font-size: 0.68rem; }

.land-analysis-layout { min-width: 0; }
.land-analysis-layout.has-detail {
  display: grid;
  grid-template-columns: minmax(540px, 1.1fr) minmax(440px, 0.9fr);
  align-items: start;
  gap: 10px;
}

.land-analysis-list,
.land-analysis-detail { min-width: 0; padding: 12px; }
.land-analysis-table-wrap,
.land-history-wrap { max-height: calc(100vh - 350px); overflow: auto; }
.land-analysis-table { min-width: 720px; }
.land-analysis-table th,
.land-analysis-table td,
.land-history-table th,
.land-history-table td { padding: 8px 9px; vertical-align: top; }
.land-analysis-table tbody tr,
.land-history-table tbody tr { cursor: pointer; }
.land-analysis-table tbody tr:hover,
.land-analysis-table tbody tr.selected,
.land-history-table tbody tr:hover { background: color-mix(in srgb, var(--info) 12%, var(--panel)); }
.land-analysis-table td strong,
.land-analysis-table td small,
.land-history-table td strong,
.land-history-table td small { display: block; }
.land-analysis-table td small,
.land-history-table td small { margin-top: 2px; color: var(--muted); font-size: 0.68rem; }

.land-limit-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}
.land-limit-status.none { color: var(--muted); background: var(--bg); }
.land-limit-status.within { color: #91d7a5; background: #203a2a; }
.land-limit-status.approaching { color: #f0cc79; background: #3c331d; }
.land-limit-status.incomplete { color: #f0cc79; background: #3c331d; }
.land-limit-status.exceeded { color: #f19a9a; background: #402626; }
.land-limit-track {
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 5px;
  overflow: hidden;
  background: var(--line);
  border-radius: 2px;
}
.land-limit-track i { display: block; height: 100%; background: var(--info); }
.land-limit-status.approaching + .land-limit-track i { background: #d9a62e; }
.land-limit-status.incomplete + .land-limit-track i { background: #d9a62e; }
.land-limit-status.exceeded + .land-limit-track i { background: #d95151; }

.land-detail-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.land-detail-facts > div { min-height: 62px; padding: 8px; }
.land-detail-facts strong { margin-top: 3px; font-size: 0.88rem; }
.land-compliance-panel,
.land-limit-editor {
  margin-bottom: 10px;
  padding: 9px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 7px;
}
.land-compliance-panel > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.land-compliance-panel p { margin: 6px 0 0; color: var(--muted); font-size: 0.72rem; }
.land-limit-editor summary { cursor: pointer; font-weight: 800; }
.land-limit-editor form { display: grid; gap: 8px; margin-top: 8px; }
.land-analysis-detail h3 { margin-bottom: 7px; font-size: 0.9rem; }
.land-history-table { min-width: 610px; }

@media (max-width: 1100px) {
  .land-analysis-layout.has-detail { grid-template-columns: 1fr; }
  .land-analysis-table-wrap,
  .land-history-wrap { max-height: none; }
}

@media (max-width: 700px) {
  .land-analysis-page { gap: 8px; }
  .land-analysis-heading { align-items: flex-start; }
  .land-analysis-heading h1 { font-size: 1.1rem; }
  .land-analysis-heading p { font-size: 0.72rem; }
  .land-analysis-controls { grid-template-columns: 1fr; padding: 8px; }
  .land-period-tabs { overflow-x: auto; }
  .land-period-tabs button { flex: 0 0 auto; min-height: 32px; padding-inline: 9px; }
  .land-analysis-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .land-analysis-summary > div { min-height: 64px; padding: 8px 10px; }
  .land-analysis-summary strong { font-size: 1.1rem; }
  .land-custom-dates { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .land-custom-dates button { grid-column: 1 / -1; }
  .land-analysis-list,
  .land-analysis-detail { padding: 9px; }
  .land-analysis-table-wrap,
  .land-history-wrap { overflow: visible; border: 0; }
  .land-analysis-table,
  .land-history-table,
  .land-analysis-table tbody,
  .land-history-table tbody { display: grid; min-width: 0; gap: 7px; }
  .land-analysis-table thead,
  .land-history-table thead { display: none; }
  .land-analysis-table tr,
  .land-history-table tr { display: grid; padding: 7px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; }
  .land-analysis-table tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .land-history-table tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .land-analysis-table td,
  .land-history-table td { display: grid; align-content: start; gap: 1px; padding: 5px; border: 0; }
  .land-analysis-table td::before,
  .land-history-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.62rem; font-weight: 800; text-transform: uppercase; }
  .land-analysis-table td:first-child,
  .land-analysis-table td:last-child,
  .land-history-table td:first-child,
  .land-history-table td:last-child { grid-column: 1 / -1; }
  .land-detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .land-limit-editor .grid.two { grid-template-columns: 1fr; }
}

.app:has(.baling-page) > .main {
  width: min(1680px, 100%);
}
.baling-page {
  display: grid;
  gap: 12px;
}
.baling-info-page {
  display: grid;
  gap: 14px;
  max-width: 1500px;
  margin: 0 auto;
}
.baling-info-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.baling-info-hero h1,
.baling-info-hero p,
.baling-info-list h2,
.baling-info-detail h2,
.baling-info-title h2,
.baling-info-title p {
  margin: 0;
}
.baling-info-hero h1 {
  font-size: clamp(1.8rem, 3vw, 2.9rem);
}
.baling-info-hero p,
.baling-info-title p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 1rem;
}
.baling-info-totals,
.baling-info-bigfacts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.baling-info-totals > div,
.baling-info-bigfacts > div {
  min-height: 92px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.baling-info-totals span,
.baling-info-bigfacts span {
  display: block;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 900;
  text-transform: uppercase;
}
.baling-info-totals strong,
.baling-info-bigfacts strong {
  display: block;
  margin-top: 8px;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1;
}
.baling-info-layout {
  display: grid;
  grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.baling-info-list,
.baling-info-detail { min-width: 0; }
.baling-info-rows {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.baling-info-row {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 13px 14px;
  color: var(--text);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
}
.baling-info-row.active {
  border-color: var(--info);
  background: color-mix(in srgb, var(--info) 14%, var(--panel));
}
.baling-info-row strong {
  font-size: 1.08rem;
}
.baling-info-row span,
.baling-info-row em {
  color: var(--muted);
  font-style: normal;
}
.baling-info-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.baling-info-title h2 {
  font-size: clamp(1.55rem, 2.4vw, 2.3rem);
}
.baling-info-title > span {
  color: var(--muted);
  white-space: nowrap;
}
.baling-info-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 430px);
  gap: 12px;
  align-items: stretch;
  margin-bottom: 14px;
}
.baling-info-bigfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.baling-info-sketch {
  width: 100%;
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  overflow: hidden;
}
.baling-info-field-map .leaflet-tile-pane img { filter: saturate(0.88) brightness(0.82) contrast(1.04); }
.baling-info-people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.baling-info-person {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}
.baling-info-person strong {
  font-size: 1.05rem;
}
.baling-info-person span {
  color: var(--muted);
}
.map-empty-overlay {
  position: absolute;
  z-index: 500;
  inset: 14px;
  display: grid;
  place-items: center;
  padding: 14px;
  color: var(--muted);
  font-weight: 900;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  pointer-events: none;
}
.field-name-label {
  color: #fff;
  background: color-mix(in srgb, #101820 78%, transparent);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  border-radius: 4px;
  box-shadow: none;
  font-weight: 900;
}
.baling-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(220px, 320px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.baling-entry-layout {
  display: grid;
  grid-template-columns: minmax(390px, 520px) minmax(620px, 1fr);
  gap: 14px;
  align-items: start;
}
.baling-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 10px;
}
.baling-summary-card {
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, var(--info));
  border-left: 4px solid var(--brand-2);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 86%, var(--bg));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
}
.baling-summary-card.warn {
  border-left-color: var(--warn);
}
.baling-summary-card span {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 750;
}
.baling-summary-card strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1;
}
.baling-entry-panel,
.baling-record-panel {
  min-width: 0;
}
.baling-entry-panel {
  padding: 0;
}
.baling-page .baling-entry-panel {
  padding: 0;
}
.baling-entry-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  cursor: pointer;
  list-style: none;
  transition: background-color .16s ease;
}
.baling-entry-panel > summary:hover {
  background: color-mix(in srgb, var(--info) 7%, transparent);
}
.baling-entry-panel > summary::-webkit-details-marker {
  display: none;
}
.baling-entry-panel > summary strong,
.baling-entry-panel > summary small {
  display: block;
}
.baling-entry-panel > summary small {
  margin-top: 2px;
  color: var(--muted);
  font-size: .78rem;
}
.baling-entry-panel[open] > summary {
  border-bottom: 1px solid var(--line);
}
.baling-entry-panel[open] .summary-action {
  color: var(--muted);
}
.summary-action {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: color-mix(in srgb, var(--info) 12%, var(--panel));
  font-weight: 850;
  font-size: .82rem;
}
.summary-action-close {
  display: none;
}
.baling-entry-panel[open] .summary-action-open {
  display: none;
}
.baling-entry-panel[open] .summary-action-close {
  display: inline;
}
.baling-entry-body {
  padding: 12px 14px 14px;
}
.baling-entry-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 2px -4px -4px;
  padding: 10px 4px 4px;
  background: linear-gradient(to bottom, transparent, var(--panel) 28%);
}
.baling-entry-actions button[type="submit"] {
  min-width: 150px;
}
.baling-unfinished-button {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 18%, var(--panel));
  color: var(--text);
}
.baling-unfinished-button:hover,
.baling-unfinished-button:focus-visible {
  background: color-mix(in srgb, var(--warn) 28%, var(--panel));
}
.baling-unfinished-badge {
  display: inline-flex;
  width: fit-content;
  margin-top: 4px;
  white-space: nowrap;
}
.baling-create-field-button {
  justify-self: start;
  margin-top: 8px;
}
.baling-finish-button {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 18%, var(--panel));
  color: var(--text);
}
.baling-finish-button:hover,
.baling-finish-button:focus-visible {
  background: color-mix(in srgb, var(--ok) 28%, var(--panel));
}
.baling-data-table tr.pending-sync {
  background: color-mix(in srgb, var(--warn) 8%, var(--panel));
}
.baling-sync-pending {
  display: inline-flex;
  white-space: nowrap;
}
.baling-entry-form {
  display: grid;
  min-width: 0;
  gap: 9px;
  overflow: hidden;
}
.baling-entry-form input[type="date"],
.baling-entry-form input[type="time"] {
  display: block;
  width: 100%;
  inline-size: 100%;
  min-width: 0;
  min-inline-size: 0;
  max-width: 100%;
  max-inline-size: 100%;
  padding-inline: 8px 4px;
  -webkit-appearance: none;
  appearance: none;
}
.baling-entry-form input[type="date"]::-webkit-date-and-time-value,
.baling-entry-form input[type="time"]::-webkit-date-and-time-value {
  min-width: 0;
  text-align: left;
}
.baling-entry-form input[type="date"]::-webkit-calendar-picker-indicator,
.baling-entry-form input[type="time"]::-webkit-calendar-picker-indicator {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 0 0 3px;
}
.baling-customer-combobox,
.baling-field-combobox {
  position: relative;
  min-width: 0;
}
.baling-customer-suggestions,
.baling-field-suggestions {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  max-height: min(260px, 42vh);
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.baling-customer-suggestions[hidden],
.baling-field-suggestions[hidden] {
  display: none;
}
.baling-customer-suggestions button,
.baling-field-suggestions button {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
}
.baling-customer-suggestions button:hover,
.baling-customer-suggestions button:focus,
.baling-field-suggestions button:hover,
.baling-field-suggestions button:focus {
  background: color-mix(in srgb, var(--info) 14%, var(--panel));
}
.baling-field-suggestions button strong,
.baling-field-suggestions button small {
  display: block;
}
.baling-field-suggestions button small {
  margin-top: 2px;
  color: var(--muted);
  font-size: .72rem;
}
.baling-entry-panel .section-title {
  align-items: start;
  gap: 10px;
}
.baling-entry-panel .section-title h2 {
  font-size: 1.18rem;
}
.baling-entry-panel .section-title p {
  max-width: 32ch;
}
.baling-form-card {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--info));
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 82%, var(--panel));
}
.baling-form-card-muted {
  padding: 9px 10px;
  background: color-mix(in srgb, var(--panel) 72%, var(--bg));
}
.baling-inline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.baling-measures {
  display: grid;
  grid-template-columns: minmax(105px, 1fr) minmax(104px, .78fr) minmax(112px, .84fr);
  gap: 9px;
  align-items: stretch;
}
.baling-entry-measures {
  grid-template-columns: minmax(0, 1fr) minmax(104px, .78fr);
}
.baling-average-preview {
  max-width: 50%;
}
.baling-person-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.baling-resume-notice {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid #d88922;
  border-radius: 10px;
  background: rgba(216, 137, 34, .12);
  color: var(--text);
}

.baling-resume-notice[hidden] {
  display: none;
}

.baling-resume-notice span {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.35;
}
.baling-person-grid > section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--info));
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 82%, var(--panel));
}
.baling-person-grid h3 {
  grid-column: 1 / -1;
  margin: 0;
  color: color-mix(in srgb, var(--text) 88%, var(--info));
  font-size: .85rem;
  letter-spacing: 0;
}
.baling-entry-form .field {
  margin: 0;
}
.baling-entry-form .field label {
  margin-bottom: 5px;
  font-size: .72rem;
  letter-spacing: 0;
}
.baling-entry-form input,
.baling-entry-form select,
.baling-entry-form textarea {
  min-height: 38px;
}
.baling-entry-form textarea {
  min-height: 76px;
}
.compact-preview {
  display: grid;
  align-content: center;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
}
.compact-preview span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.compact-preview strong {
  margin-top: 3px;
  font-size: 1.05rem;
}
.baling-start-panel,
.baling-live-list,
.baling-live-panel,
.baling-history { min-width: 0; }
.baling-history { grid-column: 1 / -1; }
.baling-data-panel { grid-column: 2 / -1; min-width: 0; }
.baling-current-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  margin-bottom: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
}
.baling-current-field span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.baling-current-field strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.baling-current-field small {
  min-width: 0;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.baling-current-field button {
  grid-row: 1 / 4;
  grid-column: 2;
}
.baling-gps-box {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, var(--info));
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 74%, var(--panel));
}
.baling-gps-box label,
.baling-gps-box small {
  display: block;
}
.baling-detected-field {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 78%, var(--bg));
}
.baling-detected-field.detected {
  border-left-color: var(--ok);
}
.baling-detected-field.unmapped {
  border-left-color: var(--warn);
}
.baling-detected-field span,
.baling-detected-field small {
  color: var(--muted);
  font-size: .74rem;
}
.baling-detected-field strong {
  color: var(--text);
}
.baling-gps-box label {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 850;
  text-transform: uppercase;
}
.baling-gps-box small {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
}
.baling-gps-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 7px;
}
.baling-entry-form .baling-gps-row input {
  min-height: 34px;
  font-family: inherit;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
.baling-gps-button.icon-button {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1;
}
.baling-gps-preview {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 78%, var(--panel));
}
.baling-gps-canvas {
  position: relative;
  width: 100%;
  height: 132px;
  overflow: hidden;
  cursor: crosshair;
  touch-action: manipulation;
}
.baling-gps-canvas img {
  position: absolute;
  width: 256px;
  height: 256px;
  max-width: none;
  user-select: none;
}
.baling-gps-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 18px;
  height: 18px;
  border: 3px solid #f5fbf8;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
}
.baling-gps-marker::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f5fbf8;
  content: "";
  transform: translate(-50%, -50%);
}
.baling-gps-preview p {
  margin: 0;
  padding: 7px 9px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 750;
}
.baling-record-panel .section-title {
  gap: 12px;
}
.baling-record-filters {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(170px, 240px);
  gap: 10px;
  padding: 12px 0;
}
.baling-record-filters input,
.baling-record-filters select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--bg);
  font: inherit;
}
.baling-job-list,
.baling-contributors { display: grid; gap: 8px; }
.baling-job-card {
  width: 100%;
  min-height: 70px;
  padding: 10px;
  color: var(--text);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  cursor: pointer;
}
.baling-job-card.active {
  border-color: var(--info);
  background: color-mix(in srgb, var(--info) 13%, var(--panel));
}
.baling-job-card strong,
.baling-job-card span,
.baling-job-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.baling-job-card span,
.baling-job-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .72rem;
}
.baling-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 12px;
}
.baling-contribution-form { margin-bottom: 12px; }
.baling-contributor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, auto) minmax(72px, auto);
  gap: 8px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
}
.baling-contributor span {
  display: block;
  color: var(--muted);
  font-size: .7rem;
}
.baling-contributor p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
}
.baling-data-table {
  display: grid;
  min-width: 0;
  gap: 9px;
  background: transparent;
}
.baling-data-table thead {
  display: none;
}
.baling-data-table tbody {
  display: grid;
  gap: 9px;
}
.baling-data-table tr {
  position: relative;
  display: grid;
  grid-template-columns: minmax(92px, .8fr) minmax(120px, 1.15fr) minmax(140px, 1.35fr) minmax(72px, .62fr) minmax(72px, .62fr) minmax(100px, .85fr);
  gap: 10px 14px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, var(--info));
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel) 88%, var(--bg));
}
.baling-data-table tr[data-action] {
  padding-bottom: 34px;
}
.baling-data-table .sync-check,
.baling-data-table .baling-sync-pending {
  position: absolute;
  left: 11px;
  bottom: 9px;
}
.baling-data-table td {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 0;
  border: 0;
}
.baling-data-table td::before {
  content: attr(data-label);
  color: var(--muted);
  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.baling-data-table td:nth-child(3) {
  grid-column: span 2;
}
.baling-data-table td:nth-child(5),
.baling-data-table td:nth-child(6),
.baling-data-table td:nth-child(7),
.baling-data-table td:nth-child(8),
.baling-data-table td:nth-child(11) {
  grid-row: 2;
}
.baling-data-table td:nth-child(9),
.baling-data-table td:nth-child(10) {
  display: none;
}
.baling-data-table td:nth-child(12) {
  grid-column: 6;
  grid-row: 1 / span 2;
  justify-items: start;
}
.baling-data-table .baling-edit-row,
.baling-data-table .baling-map-row {
  display: block;
  padding: 0;
}
.baling-data-table .baling-edit-row > td,
.baling-data-table .baling-map-row > td {
  display: block;
}
.baling-data-table .baling-edit-row > td::before,
.baling-data-table .baling-map-row > td::before {
  content: none;
}
.baling-data-table th,
.baling-data-table td {
  padding-block: 9px;
  vertical-align: top;
}
.baling-data-table th {
  white-space: nowrap;
}
.baling-data-table td {
  color: color-mix(in srgb, var(--text) 92%, var(--muted));
}
.baling-data-table td:nth-child(4),
.baling-data-table td:nth-child(5),
.baling-data-table td:nth-child(6),
.baling-data-table td:nth-child(7),
.baling-data-table td:nth-child(8),
.baling-data-table td:nth-child(9),
.baling-data-table td:nth-child(10),
.baling-data-table td:nth-child(11) {
  font-variant-numeric: tabular-nums;
}
.baling-data-table tr.selected {
  background: color-mix(in srgb, var(--info) 13%, var(--panel));
}
.baling-data-table .baling-edit-row {
  background: color-mix(in srgb, var(--info) 8%, var(--panel));
}
.baling-data-table .baling-edit-row > td {
  padding: 0;
}
.baling-data-table tbody tr[data-action] {
  cursor: pointer;
}
.link-button {
  padding: 0;
  border: 0;
  color: var(--info);
  background: transparent;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.link-button:hover {
  text-decoration: underline;
}
.load-field-link {
  max-width: 100%;
  color: var(--info);
  text-align: left;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.load-field-link:hover,
.load-field-link:focus-visible {
  color: var(--brand);
  text-decoration-thickness: 2px;
}
.danger-link {
  color: var(--danger);
}
.baling-map-link {
  margin-left: 8px;
}
.baling-mobile-date {
  display: none;
}
.baling-inline-map-shell {
  padding: 12px;
  border-top: 1px solid var(--line);
}
.baling-row-map {
  height: min(360px, 42vh);
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.baling-data-table .baling-map-row > td {
  padding: 0;
}
.baling-edit-panel {
  min-width: 0;
  overflow: hidden;
  padding: 14px;
  border-top: 1px solid var(--line);
}
.baling-edit-panel .section-title {
  margin-bottom: 10px;
}
.baling-data-table td strong,
.baling-data-table td small {
  display: block;
}
.baling-data-table td small {
  margin-top: 2px;
  color: var(--muted);
  font-size: .68rem;
}
@media (max-width: 1100px) {
  .baling-info-layout,
  .baling-info-main { grid-template-columns: 1fr; }
  .baling-info-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .baling-entry-layout,
  .baling-layout { grid-template-columns: minmax(240px, 330px) minmax(0, 1fr); }
  .baling-entry-panel,
  .baling-record-panel { grid-column: 1 / -1; }
  .baling-live-panel { grid-column: 1 / -1; }
  .baling-data-panel { grid-column: 1 / -1; }
  .baling-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 721px) and (max-width: 1366px) and (orientation: landscape) {
  .baling-record-panel {
    padding-inline: 10px;
  }
  .baling-data-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    font-size: .72rem;
  }
  .baling-data-table th,
  .baling-data-table td {
    overflow: hidden;
    padding: 7px 4px;
    text-overflow: ellipsis;
  }
  .baling-data-table th:nth-child(1) { width: 10%; }
  .baling-data-table th:nth-child(2) { width: 15%; }
  .baling-data-table th:nth-child(3) { width: 18%; }
  .baling-data-table th:nth-child(4) { width: 7%; }
  .baling-data-table th:nth-child(5),
  .baling-data-table th:nth-child(6) { width: 7%; }
  .baling-data-table th:nth-child(7) { width: 7%; }
  .baling-data-table th:nth-child(8) { width: 8%; }
  .baling-data-table th:nth-child(9),
  .baling-data-table th:nth-child(10),
  .baling-data-table td:nth-child(9),
  .baling-data-table td:nth-child(10) { display: none; }
  .baling-data-table th:nth-child(11) { width: 9%; }
  .baling-data-table th:nth-child(12) { width: 12%; }
  .baling-data-table td:nth-child(12) {
    white-space: normal;
  }
  .baling-data-table td:nth-child(12) .link-button {
    display: block;
    margin-top: 3px;
    font-size: .7rem;
  }
}
@media (min-width: 721px) and (max-height: 860px) {
  .baling-page {
    gap: 9px;
  }
  .baling-page .land-analysis-heading {
    align-items: center;
    min-height: 0;
  }
  .baling-page .land-analysis-heading p {
    display: none;
  }
  .baling-summary-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 7px;
  }
  .baling-summary-card {
    min-height: 54px;
    padding: 8px 9px;
    border-left-width: 3px;
    box-shadow: none;
  }
  .baling-summary-card span {
    font-size: .65rem;
  }
  .baling-summary-card strong {
    font-size: clamp(1rem, 1.55vw, 1.22rem);
  }
}
@media (max-width: 720px) {
  .baling-entry-form input,
  .baling-entry-form select,
  .baling-entry-form textarea {
    font-size: 16px;
  }
  .audit-panel {
    min-width: 0;
    padding: 12px;
  }
  .audit-heading {
    display: grid;
    justify-content: stretch;
    gap: 10px;
  }
  .audit-heading > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
  }
  .audit-heading h2 {
    flex: 0 0 auto;
    font-size: 1.12rem;
  }
  .audit-heading p {
    margin: 0;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.25;
  }
  .audit-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: 100%;
    white-space: normal;
  }
  .audit-actions .status,
  .audit-actions button {
    width: 100%;
    min-width: 0;
    padding-inline: 9px;
    white-space: nowrap;
  }
  .audit-table-wrap {
    width: 100%;
    min-width: 0;
    overflow: visible;
    border: 0;
  }
  .audit-table,
  .audit-table tbody {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 8px;
  }
  .audit-table thead {
    display: none;
  }
  .audit-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
    gap: 6px 12px;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
  }
  .audit-table td {
    display: grid;
    min-width: 0;
    gap: 2px;
    padding: 0;
    border: 0;
    overflow-wrap: anywhere;
  }
  .audit-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .045em;
    text-transform: uppercase;
  }
  .audit-table td:nth-child(3),
  .audit-table td:nth-child(4),
  .audit-table td:nth-child(5) {
    grid-column: 1 / -1;
  }
  .baling-info-hero { align-items: flex-start; padding: 14px; }
  .baling-info-totals,
  .baling-info-bigfacts,
  .baling-info-people { grid-template-columns: 1fr; }
  .baling-info-totals > div,
  .baling-info-bigfacts > div { min-height: 78px; }
  .baling-info-sketch { min-height: 220px; }
  .baling-entry-layout,
  .baling-layout { grid-template-columns: 1fr; gap: 9px; }
  .baling-page {
    gap: 8px;
  }
  .baling-page .land-analysis-heading {
    gap: 6px;
    margin-bottom: 0;
  }
  .baling-page .land-analysis-heading h1 {
    font-size: 1.22rem;
  }
  .baling-page .land-analysis-heading p {
    font-size: .76rem;
  }
  .baling-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .baling-summary-card {
    min-height: 62px;
    padding: 10px 11px;
  }
  .baling-entry-body {
    padding: 10px;
  }
  .baling-entry-panel > summary {
    padding: 11px 12px;
  }
  .baling-entry-panel .section-title {
    margin-bottom: 8px;
    padding-bottom: 8px;
  }
  .baling-entry-panel .section-title h2 {
    font-size: 1.08rem;
  }
  .baling-entry-panel .section-title p {
    display: none;
  }
  .baling-entry-panel .section-title > div {
    display: none;
  }
  .baling-entry-panel .section-title {
    justify-content: flex-end;
  }
  .baling-inline-grid > .field,
  .baling-inline-grid > .field input,
  .baling-inline-grid > .field select {
    min-width: 0;
    max-width: 100%;
  }
  .baling-record-filters {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 0;
  }
  .baling-inline-grid,
  .baling-entry-location,
  .baling-person-grid {
    grid-template-columns: 1fr;
  }
  .baling-entry-form-new {
    gap: 10px;
  }
  .baling-entry-form-new .baling-form-card {
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .baling-entry-form-new .baling-date-time-grid {
    grid-template-columns: minmax(0, 1fr) minmax(104px, .46fr);
    gap: 8px;
  }
  .baling-entry-form-new .baling-gps-box {
    padding: 0;
    border: 0;
    background: transparent;
  }
  .baling-entry-form-new .baling-gps-preview {
    margin-top: 6px;
  }
  .baling-entry-form-new .baling-gps-canvas {
    min-height: 112px;
  }
  .baling-entry-form-new .baling-detected-field {
    padding: 8px 10px;
  }
  .baling-entry-form-new .baling-entry-measures {
    grid-template-columns: minmax(0, 1fr) minmax(104px, .46fr);
  }
  .baling-entry-form-new .baling-person-grid > section {
    padding: 0;
    border: 0;
    background: transparent;
  }
  .baling-entry-form-new .baling-average-preview {
    width: calc((100% - 8px) * .685);
    max-width: none;
  }
  .baling-measures {
    grid-template-columns: minmax(0, 1fr) minmax(86px, .7fr) minmax(94px, .78fr);
    gap: 7px;
  }
  .baling-person-grid > section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 9px;
  }
  .baling-form-card {
    padding: 9px;
  }
  .compact-preview {
    min-height: 52px;
    padding: 8px;
  }
  .compact-preview span {
    font-size: .62rem;
  }
  .compact-preview strong {
    font-size: .96rem;
  }
  .baling-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .baling-contributor { grid-template-columns: minmax(0, 1fr) minmax(64px, auto) minmax(64px, auto); }
  .baling-data-table,
  .baling-data-table tbody {
    display: grid;
    min-width: 0;
    gap: 7px;
  }
  .baling-data-table thead { display: none; }
  .baling-data-table tr {
    display: grid;
    grid-template-columns: minmax(72px, .8fr) minmax(0, 1.35fr) minmax(72px, .7fr);
    gap: 0 8px;
    padding: 9px 10px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: var(--panel);
  }
  .baling-data-table td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
  }
  .baling-data-table td::before {
    content: none;
  }
  .baling-data-table td:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 3;
    font-size: .98rem;
    font-weight: 900;
    line-height: 1.05;
  }
  .baling-desktop-date {
    display: none;
  }
  .baling-mobile-date {
    display: block;
  }
  .baling-mobile-date small {
    display: block;
    margin-top: 2px;
    color: var(--text);
    font-size: inherit;
    font-weight: 900;
  }
  .baling-data-table td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    font-size: .96rem;
    font-weight: 900;
    line-height: 1.1;
  }
  .baling-data-table td:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.15;
  }
  .baling-data-table td:nth-child(3) strong {
    display: inline;
    overflow: hidden;
    min-width: 0;
    color: var(--muted);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .baling-map-link {
    flex: 0 0 auto;
    margin-left: 0;
    color: var(--brand-2);
    text-decoration: underline;
  }
  .baling-data-table td:nth-child(4) {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
  }
  .baling-data-table td:nth-child(4) strong {
    color: var(--brand-2);
    font-size: 1.28rem;
    line-height: 1;
  }
  .baling-data-table td:nth-child(5),
  .baling-data-table td:nth-child(6),
  .baling-data-table td:nth-child(7),
  .baling-data-table td:nth-child(9),
  .baling-data-table td:nth-child(10) {
    display: none;
  }
  .baling-data-table td:nth-child(8) {
    grid-column: 3;
    grid-row: 3;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 800;
    text-align: right;
  }
  .baling-data-table td:nth-child(8)::after {
    content: "/ac";
  }
  .baling-data-table td:nth-child(11) {
    grid-column: 3;
    grid-row: 2;
    color: var(--muted);
    font-size: .92rem;
    font-weight: 900;
    text-align: right;
  }
  .baling-data-table td:nth-child(12) {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 6px;
  }
  .baling-data-table td:nth-child(12) .sync-check {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    color: var(--brand-2);
    background: color-mix(in srgb, var(--brand-2) 14%, transparent);
    font-weight: 900;
  }
  .baling-row-edit-action {
    display: none;
  }
  .baling-data-table td:nth-child(12) .danger-link {
    color: var(--danger);
    font-size: .92rem;
    font-weight: 900;
  }
  .baling-data-table .baling-edit-row {
    display: block;
    padding: 0;
    border-bottom: 1px solid var(--line);
  }
  .baling-data-table .baling-edit-row > td {
    display: block;
    padding: 0;
  }
  .baling-data-table .baling-map-row {
    display: block;
    padding: 0;
    border-bottom: 1px solid var(--line);
  }
  .baling-data-table .baling-map-row > td {
    display: block;
  }
  .baling-inline-map-shell {
    padding: 10px;
  }
  .baling-row-map {
    height: 230px;
    min-height: 210px;
  }
  .baling-data-table .baling-edit-row > td::before {
    content: none;
  }
  .baling-edit-panel {
    border-top: 0;
    border-radius: 0 0 7px 7px;
  }
}
@media (max-width: 430px) {
  .topbar .status {
    display: none;
  }

  .topbar .button-row {
    flex: 0 0 auto;
    gap: 6px;
  }

  .topbar .ghost {
    padding-inline: 8px;
  }

  .brand h1 {
    max-width: 122px;
    font-size: 0.78rem;
    line-height: 1.05;
  }

  .baling-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .baling-page .land-analysis-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 8px;
  }
  .baling-page .land-analysis-heading p {
    display: none;
  }
  .baling-page .land-analysis-heading .status {
    align-self: center;
    padding: 4px 7px;
    font-size: .68rem;
  }
  .baling-summary-card {
    min-height: 48px;
    padding: 7px 8px;
    border-left-width: 3px;
    box-shadow: none;
  }
  .baling-summary-card span {
    overflow: hidden;
    font-size: .64rem;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .baling-summary-card strong {
    margin-top: 3px;
    font-size: clamp(1.05rem, 6vw, 1.35rem);
  }
  .baling-entry-panel > summary {
    padding: 9px 10px;
  }
  .baling-entry-panel > summary small {
    display: none;
  }
  .summary-action {
    padding: 6px 9px;
    font-size: .78rem;
  }
  .baling-measures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .baling-measures .field {
    grid-column: 1 / -1;
  }
  .baling-person-grid > section {
    grid-template-columns: 1fr;
  }
  .baling-entry-form-new .baling-entry-measures {
    grid-template-columns: minmax(0, 1fr) minmax(104px, .46fr);
  }
  .baling-entry-form-new .baling-entry-measures .field {
    grid-column: auto;
  }
  .baling-entry-form-new .baling-person-grid > section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .baling-entry-form-new .baling-person-grid h3 {
    grid-column: 1 / -1;
  }
  .baling-entry-panel .baling-entry-body {
    padding: 8px;
  }
  .baling-entry-form-new {
    gap: 6px;
  }
  .baling-entry-form-new .baling-form-card,
  .baling-entry-form-new .baling-person-grid {
    gap: 6px;
  }
  .baling-entry-form-new .field {
    gap: 3px;
  }
  .baling-entry-form-new .field label {
    margin-bottom: 1px;
    font-size: .68rem;
  }
  .baling-entry-form-new input,
  .baling-entry-form-new select {
    min-height: 38px;
    padding: 6px 9px;
  }
  .baling-entry-form-new textarea {
    min-height: 60px;
    padding: 7px 9px;
  }
  .baling-entry-form-new .baling-gps-preview {
    display: none;
  }
  .baling-entry-form-new .baling-detected-field {
    gap: 0;
    padding: 6px 8px;
  }
  .baling-entry-form-new .baling-person-grid > section {
    gap: 5px 8px;
  }
  .baling-entry-form-new .baling-person-grid h3 {
    font-size: .8rem;
  }
  .baling-entry-form-new .compact-preview {
    min-height: 44px;
    padding: 6px 8px;
  }
  .baling-entry-form-new .baling-entry-actions {
    padding-top: 6px;
  }
}

/* Keep bailing records readable at phone widths. The general mobile table
   layout above uses three columns, which is too cramped once panel padding is
   taken into account (especially with larger iOS text sizes). */
@media (max-width: 520px) {
  .baling-record-panel {
    padding-inline: 10px;
  }

  .baling-data-table,
  .baling-data-table tbody {
    gap: 8px;
  }

  .baling-data-table tr {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
  }

  .baling-data-table td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    font-size: .9rem;
    line-height: 1.15;
  }

  .baling-mobile-date {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
  }

  .baling-mobile-date small {
    display: inline;
    margin-top: 0;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
  }

  .baling-data-table td:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    font-size: 1rem;
  }

  .baling-data-table td:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: .84rem;
  }

  .baling-data-table td:nth-child(3) strong {
    max-width: 100%;
  }

  .baling-data-table td:nth-child(4) {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
  }

  .baling-data-table td:nth-child(8) {
    grid-column: 2;
    grid-row: 4;
    align-self: center;
  }

  .baling-data-table td:nth-child(11) {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
  }

  .baling-data-table td:nth-child(12) {
    grid-column: 1;
    grid-row: 4;
    padding-top: 4px;
  }

  .baling-data-table .baling-edit-row,
  .baling-data-table .baling-map-row {
    border-radius: 8px;
  }

  .dashboard-loads-panel .dashboard-loads-table th:nth-child(1) { width: 25%; }
  .dashboard-loads-panel .dashboard-loads-table th:nth-child(2) { width: 52%; }
  .dashboard-loads-panel .dashboard-loads-table th:nth-child(3) { width: 23%; }
}

/* The redesigned Baling editor is a contained mobile sheet. These rules are
   intentionally late so the legacy responsive table styles cannot widen it. */
.baling-design-editor,
.baling-design-editor * { box-sizing: border-box; }
.baling-design-editor table,
.baling-design-editor tbody,
.baling-design-editor tr,
.baling-design-editor td { width: 100%; min-width: 0; max-width: 100%; display: block; }
.baling-design-editor td { padding: 0; border: 0; }
.baling-design-editor .baling-edit-panel { width: 100%; max-width: 680px; margin: 0 auto; overflow: visible; padding: 16px; }
.baling-design-editor .baling-entry-form { width: 100%; overflow: visible; padding-bottom: 0; }
.baling-design-editor .baling-edit-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid #ead8ac; border-radius: 12px; background: #fff8e8; }
.baling-design-editor .baling-edit-status.unfinished { border-color: #edc36e; background: #fff4d9; }
.baling-design-editor .baling-edit-status.finished { border-color: #cfe3d3; background: #eef8f0; }
.baling-design-editor .baling-edit-status > div { display: grid; gap: 2px; }
.baling-design-editor .baling-edit-status span { color: #667085; font-size: 0.66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.baling-design-editor .baling-edit-status strong { font-size: 0.9rem; }
.baling-design-editor .baling-edit-status button { min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: 0.72rem; font-weight: 850; }
.baling-design-editor .baling-form-card,
.baling-design-editor .baling-person-grid > section { min-width: 0; max-width: 100%; }
.baling-design-editor input,
.baling-design-editor select,
.baling-design-editor textarea { width: 100%; min-width: 0; max-width: 100%; }
.baling-design-editor .baling-edit-actions {
  position: static;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 8px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid #e5e9e6;
  background: transparent;
}
.baling-design-editor .baling-edit-actions button { min-width: 0; min-height: 48px; border-radius: 11px; font-size: 0.78rem; font-weight: 800; }
.baling-design-editor .baling-edit-actions button[data-baling-status] { display: none; }
.baling-design-editor .baling-edit-actions .danger { min-height: 40px; border: 1px solid #e8bcbc; color: #ac3434; background: #fff7f7; }

@media (max-width: 520px) {
  .baling-design-editor { padding: max(8px, env(safe-area-inset-top)) 6px max(8px, env(safe-area-inset-bottom)); }
  .baling-design-editor table { margin: 0 auto; }
  .baling-design-editor .baling-edit-panel { min-height: calc(100dvh - max(16px, env(safe-area-inset-top))); padding: 13px 11px 8px; border-radius: 18px 18px 0 0; }
  .baling-design-editor .baling-edit-panel > .section-title { position: sticky; z-index: 6; top: 0; padding: 5px 2px 11px; background: #fff; }
  .baling-design-editor .baling-inline-grid,
  .baling-design-editor .baling-entry-location,
  .baling-design-editor .baling-person-grid { grid-template-columns: 1fr; }
  .baling-design-editor .baling-measures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .baling-design-editor .baling-measures .field { grid-column: 1 / -1; }
  .baling-design-editor .baling-person-grid > section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .baling-design-editor .baling-person-grid h3 { grid-column: 1 / -1; }
}

/* Role permissions */
.permission-layout { display:grid; grid-template-columns:minmax(220px, 280px) minmax(0, 1fr); gap:12px; align-items:start; }
.permission-roles { position:sticky; top:108px; }
.role-list { display:grid; gap:6px; margin:12px 0 18px; }
.role-list-item { display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; padding:10px 12px; border:1px solid var(--line); background:var(--bg); color:var(--text); text-align:left; }
.role-list-item small { color:var(--muted); font-size:.75rem; }
.role-list-item.active { border-color:var(--brand-2); background:color-mix(in srgb, var(--brand) 18%, var(--panel)); }
.role-list-item:disabled { opacity:.72; cursor:not-allowed; }
.new-role-form { border-top:1px solid var(--line); padding-top:14px; }
.new-role-form > label { display:block; margin-bottom:7px; color:var(--muted); font-size:.8rem; font-weight:700; }
.new-role-form .compact-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; }
.permission-editor .section-title { align-items:center; }
.role-name-field { max-width:420px; margin:10px 0 16px; }
.permission-groups { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.permission-group { border:1px solid var(--line); background:var(--bg); padding:6px 12px; border-radius:6px; }
.permission-group.has-beta-permissions {
  border-color: color-mix(in srgb, var(--warn) 42%, var(--line));
  background: color-mix(in srgb, var(--warn) 5%, var(--bg));
}
.permission-group h3 { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:5px 0; padding:4px 0 8px; border-bottom:1px solid var(--line); font-size:.88rem; }
.permission-toggle { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:40px; border-bottom:1px solid color-mix(in srgb, var(--line) 65%, transparent); cursor:pointer; }
.permission-toggle > span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.permission-toggle.beta-permission {
  color: color-mix(in srgb, var(--text) 92%, var(--warn));
}
.permission-beta-badge,
.permission-group-beta {
  flex: 0 0 auto;
}
.permission-toggle.beta-permission input:checked + i {
  background: color-mix(in srgb, var(--warn) 72%, var(--brand-2));
}
.permission-toggle:last-child { border-bottom:0; }
.permission-toggle input { position:absolute; opacity:0; pointer-events:none; }
.permission-toggle i { position:relative; flex:0 0 36px; width:36px; height:20px; border-radius:10px; background:#59636b; transition:background .15s ease; }
.permission-toggle i::after { content:""; position:absolute; width:16px; height:16px; left:2px; top:2px; border-radius:50%; background:#fff; transition:transform .15s ease; }
.permission-toggle input:checked + i { background:var(--brand-2); }
.permission-toggle input:checked + i::after { transform:translateX(16px); }
.permission-toggle input:focus-visible + i { outline:2px solid var(--brand-2); outline-offset:2px; }
.permission-toggle.locked { cursor:default; }
.permission-toggle.locked span { color:var(--muted); }
.permission-toggle.locked i { opacity:.72; }
.permission-save-row { display:flex; justify-content:flex-end; margin-top:12px; }
.nav .beta-nav-item {
  border-color: color-mix(in srgb, var(--warn) 42%, transparent);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
}
.nav .beta-nav-item.active,
.nav .beta-nav-item:hover:not(.active) {
  color: var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--info) 38%, var(--panel)), color-mix(in srgb, var(--warn) 20%, var(--panel)));
}
@media (max-width:760px) {
  .permission-layout { grid-template-columns:1fr; }
  .permission-roles { position:static; }
  .role-list { display:flex; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
  .role-list::-webkit-scrollbar { display:none; }
  .role-list-item { flex:0 0 min(210px, 72vw); }
  .permission-groups { grid-template-columns:1fr; }
  .permission-editor > .section-title { align-items:flex-start; }
}
.load-secondary-actions { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.load-misload-button,
.load-waiting-button { width:100%; min-height:42px; }
@media (max-width:380px) {
  .load-secondary-actions { grid-template-columns:1fr; }
}
.settings-page {
  display: grid;
  gap: 14px;
  width: min(100%, 980px);
  margin-inline: auto;
}

.settings-page-heading { padding: 3px 7px 0; }
.settings-page-heading h1 { margin: 0; color: #101827; font-size: 1.75rem; letter-spacing: -0.035em; }
.settings-page-heading p { margin: 3px 0 0; color: #667085; font-size: 0.9rem; }
.settings-card {
  padding: 18px;
  border: 1px solid #e2e8e4;
  border-radius: 18px;
  color: #101827;
  background: #fff;
  box-shadow: 0 8px 25px rgba(22, 44, 31, 0.07);
}
.settings-card-heading { display: flex; align-items: center; gap: 13px; }
.settings-card-heading > div { min-width: 0; }
.settings-card-heading h2,
.settings-signout h2,
.settings-password-card summary h2 { margin: 0; font-size: 1.08rem; letter-spacing: -0.015em; }
.settings-card-heading p,
.settings-signout p,
.settings-password-card summary p { margin: 3px 0 0; color: #667085; font-size: 0.78rem; line-height: 1.35; }
.settings-card-icon,
.settings-fact-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #218a38;
  background: #eaf6ec;
}
.settings-card-icon.small { width: 40px; height: 40px; flex-basis: 40px; }
.settings-card-icon svg,
.settings-fact-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.settings-vehicle { display: grid; gap: 6px; margin-top: 17px; }
.settings-vehicle > span { color: #4c5a53; font-size: 0.74rem; font-weight: 750; }
.settings-vehicle > div { min-height: 70px; display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 8px; padding: 4px 11px; border: 1px solid #dfe5e2; border-radius: 13px; }
.settings-vehicle img { width: 86px; height: 60px; object-fit: contain; }
.settings-vehicle .account-vehicle-control { display: block; min-width: 0; }
.settings-vehicle .account-vehicle-control > label { display: none; }
.settings-vehicle .account-vehicle-control select { width: 100%; min-height: 48px; border: 0; background: transparent; font-size: 0.95rem; font-weight: 760; }
.settings-account-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.settings-account-facts > div { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 11px; border: 1px solid #e1e7e3; border-radius: 12px; }
.settings-fact-icon { width: 34px; height: 34px; flex-basis: 34px; }
.settings-fact-icon svg { width: 18px; height: 18px; }
.settings-account-facts p { min-width: 0; margin: 0; }
.settings-account-facts small,
.settings-account-facts strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-account-facts small { margin-bottom: 2px; color: #667085; font-size: 0.66rem; }
.settings-account-facts strong { font-size: 0.82rem; }
.settings-summary-row { min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 11px; margin-top: 13px; padding: 12px; border: 1px solid #e1e7e3; border-radius: 12px; }
.settings-summary-row > div { min-width: 0; }
.settings-summary-row strong { font-size: 0.86rem; }
.settings-summary-row p { display: -webkit-box; margin: 3px 0 0; overflow: hidden; color: #667085; font-size: 0.72rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.settings-count { padding: 5px 8px; border-radius: 999px; color: #218a38; background: #eaf6ec; font-size: 0.7rem; font-weight: 750; white-space: nowrap; }
.settings-summary-row.compact { grid-template-columns: 40px minmax(0, 1fr) auto; }
.settings-last-login { color: #218a38; font-size: 0.74rem; font-weight: 750; }
.settings-weekend-loads { margin-top: 13px; overflow: hidden; border: 1px solid #dce6df; border-radius: 14px; background: #f8fbf8; }
.settings-weekend-loads > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-bottom: 1px solid #e1e8e3; }
.settings-weekend-loads h3 { margin: 0; font-size: 0.9rem; letter-spacing: -0.01em; }
.settings-weekend-loads header p { margin: 2px 0 0; color: #667085; font-size: 0.66rem; }
.settings-weekend-loads header > span { color: #218a38; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.settings-weekend-list { display: grid; }
.settings-weekend-row { display: grid; grid-template-columns: minmax(80px, 0.75fr) repeat(2, minmax(105px, 1fr)); align-items: stretch; }
.settings-weekend-row + .settings-weekend-row { border-top: 1px solid #e1e8e3; }
.settings-weekend-label { align-self: center; padding: 10px 13px; color: #68746c; font-size: 0.67rem; font-weight: 750; }
.settings-weekend-day { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; column-gap: 8px; padding: 8px 12px; border-left: 1px solid #e1e8e3; }
.settings-weekend-day > span { grid-row: 1 / 3; align-self: center; color: #35413a; font-size: 0.72rem; font-weight: 750; }
.settings-weekend-day > span small { display: block; margin-top: 1px; color: #7a867e; font-size: 0.6rem; font-weight: 600; }
.settings-weekend-day > strong { color: #178434; font-size: 1.05rem; line-height: 1; text-align: right; }
.settings-weekend-day > small { color: #7a867e; font-size: 0.56rem; text-align: right; }
.settings-data-card .permission-toggle { align-items: flex-start; margin: 13px 0 0 57px; padding: 0; border: 0; }
.settings-data-card .permission-toggle strong { font-size: 0.82rem; }
.settings-data-card .permission-toggle small { margin-top: 4px; color: #667085; font-size: 0.72rem; line-height: 1.45; }
.settings-data-card .permission-toggle i { flex-basis: 44px; width: 44px; height: 25px; border-radius: 999px; }
.settings-data-card .permission-toggle i::after { width: 21px; height: 21px; }
.settings-data-card .permission-toggle input:checked + i { background: #24913a; }
.settings-data-card .permission-toggle input:checked + i::after { transform: translateX(19px); }
.settings-report-card { gap: 12px; }
.settings-report-card .field { margin-left: 57px; }
.settings-report-card button { width: calc(100% - 57px); margin-left: 57px; background: #246aa2; }
.settings-password-card { padding: 0; overflow: hidden; }
.settings-password-card summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 16px 18px; cursor: pointer; list-style: none; }
.settings-password-card summary::-webkit-details-marker { display: none; }
.settings-chevron { color: #667085; font-size: 1.65rem; transition: transform 0.15s ease; }
.settings-password-card[open] .settings-chevron { transform: rotate(90deg); }
.settings-password-card > form { padding: 0 18px 18px 75px; }
.settings-signout { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 13px; }
.settings-card-icon.danger { color: #d13d3d; background: #fdecec; }
.settings-signout button { min-height: 43px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 1px solid #df4848; border-radius: 11px; color: #ce3434; background: #fff; font-weight: 760; }
.settings-signout button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

.settings-theme-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 15px 0 0 57px;
}

.settings-theme-options button {
  min-width: 0;
  min-height: 88px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  gap: 2px 8px;
  padding: 11px;
  border: 1px solid #dfe6e1;
  border-radius: 12px;
  color: #263229;
  background: #f8faf8;
  text-align: left;
}

.settings-theme-options button > span { grid-row: 1 / -1; color: #64726a; font-size: 1.35rem; text-align: center; }
.settings-theme-options button strong { font-size: .8rem; }
.settings-theme-options button small { overflow: hidden; color: #6c776f; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.settings-theme-options button.active { border-color: #24913a; color: #155c25; background: #eaf6ec; box-shadow: inset 0 0 0 1px #24913a; }
.settings-theme-options button.active > span { color: #24913a; }

/* Explicit theme choices for the redesigned app. Light remains the default;
   dark uses the same green identity with lower-glare surfaces. */
html[data-theme="light"] .record-preview-shell {
  color-scheme: light;
}

html[data-theme="light"] .record-preview-shell .field input,
html[data-theme="light"] .record-preview-shell .field select,
html[data-theme="light"] .record-preview-shell .field textarea {
  color: #1d232c;
  background: #ffffff;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111612;
  --panel: #1a211c;
  --text: #edf4ef;
  --muted: #a8b5ac;
  --line: #344139;
  --brand: #67c478;
  --brand-2: #299442;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .record-preview-shell,
html[data-theme="dark"] .record-preview-shell > .main {
  color: #edf4ef;
  background: #111612;
}

html[data-theme="dark"] .record-preview-shell {
  color-scheme: dark;
  --bg: #111612;
  --panel: #1a211c;
  --text: #edf4ef;
  --muted: #a8b5ac;
  --line: #344139;
  --record-green: #61c475;
  --record-green-deep: #45ab5b;
  --record-green-soft: #203b27;
  --record-amber-soft: #3a311c;
  --record-red-soft: #402525;
  --record-ink: #edf4ef;
  --record-muted: #a8b5ac;
  --record-line: #344139;
  --record-surface: #1a211c;
  --record-shadow: 0 12px 34px rgba(0, 0, 0, .28), 0 2px 7px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] .record-preview-shell .app-header,
html[data-theme="dark"] .record-preview-shell .topbar,
html[data-theme="dark"] .record-preview-shell .nav {
  color: #edf4ef;
  background: rgba(20, 27, 22, .96);
  border-color: #344139;
}

html[data-theme="dark"] .record-preview-shell :is(
  .panel,
  .dashboard-summary-card,
  .dashboard-baling-record,
  .dashboard-loads-panel,
  .dashboard-baling-panel,
  .record-preview-location,
  .record-preview-action-panel,
  .record-preview-activity,
  .record-preview-map-card,
  .record-preview-vehicle,
  .settings-card,
  .baling-design-recent-list,
  .baling-design-recent-row,
  .baling-design-location-card,
  .muck-design-launchers > button,
  .muck-design-summary,
  .muck-design-field-group,
  .muck-design-view-all
) {
  color: #edf4ef;
  background: #1a211c;
  border-color: #344139;
  box-shadow: var(--record-shadow);
}

html[data-theme="dark"] .record-preview-shell :is(.dashboard-page, .settings-page) h1,
html[data-theme="dark"] .record-preview-shell :is(.dashboard-page, .settings-page) h2,
html[data-theme="dark"] .record-preview-shell :is(.dashboard-page, .settings-page) strong {
  color: #edf4ef;
}

html[data-theme="dark"] .record-preview-shell :is(.dashboard-page, .settings-page) p,
html[data-theme="dark"] .record-preview-shell :is(.dashboard-page, .settings-page) small,
html[data-theme="dark"] .record-preview-shell :is(.dashboard-page, .settings-page) span {
  border-color: #344139;
}

html[data-theme="dark"] .record-preview-shell :is(table, thead, tbody, tr, td, th, .table-wrap, .empty) {
  color: #e4ece6;
  background-color: #1a211c;
  border-color: #344139;
}

html[data-theme="dark"] .record-preview-shell :is(input, select, textarea) {
  color: #edf4ef;
  background: #111612;
  border-color: #445248;
}

html[data-theme="dark"] .record-preview-shell option { color: #edf4ef; background: #1a211c; }
html[data-theme="dark"] .record-preview-shell .settings-theme-options button { color: #dce6df; background: #141a16; border-color: #3b4940; }
html[data-theme="dark"] .record-preview-shell .settings-theme-options button small { color: #a8b5ac; }
html[data-theme="dark"] .record-preview-shell .settings-theme-options button.active { color: #b9efc4; background: #203b27; border-color: #61c475; box-shadow: inset 0 0 0 1px #61c475; }
html[data-theme="dark"] .record-preview-shell .settings-weekend-loads { background: #141a16; border-color: #3b4940; }
html[data-theme="dark"] .record-preview-shell .settings-weekend-loads > header,
html[data-theme="dark"] .record-preview-shell .settings-weekend-row + .settings-weekend-row,
html[data-theme="dark"] .record-preview-shell .settings-weekend-day { border-color: #344139; }
html[data-theme="dark"] .record-preview-shell .settings-signout button { color: #ff9c9c; background: #2a1b1b; border-color: #9d4c4c; }

html[data-theme="dark"] .record-preview-shell :is(.nav-menu-items, .tank-override, .empty, .event-card, .workspace-tabs, .field-navigator-item, .planning-wayline-list button, .fendt-comparison-grid > div) {
  color: #edf4ef;
  background: #1a211c;
  border-color: #344139;
}

html[data-theme="dark"] .record-preview-shell :is(.ghost, .status, .field .vehicle-check-list label, .map-selection-bar, .deployment-totals, .fendt-import-facts span) {
  color: #edf4ef;
  background: #242c26;
  border-color: #3b4940;
}

html[data-theme="dark"] .record-preview-shell .status.ok { color: #9ce1aa; background: #203a2a; }
html[data-theme="dark"] .record-preview-shell .status.warn { color: #f0cc79; background: #3c331d; }
html[data-theme="dark"] .record-preview-shell .status.danger { color: #f19a9a; background: #402626; }
html[data-theme="dark"] .record-preview-shell .status.info { color: #a8d9b2; background: #203b27; }
html[data-theme="dark"] .record-preview-shell .sync-indicator.ok { background: #203a2a; }
html[data-theme="dark"] .record-preview-shell .sync-indicator.warn { color: #f0cc79; background: #3c331d; }
html[data-theme="dark"] .record-preview-shell .sync-indicator.danger { color: #f19a9a; background: #402626; }

html[data-theme="dark"] .record-preview-shell :is(.user-access-card, .user-access-card > summary, .user-access-expanded > footer, .work-area-choice, .advanced-profile-note, .tablet-login-editor, .tablet-login-editor > form) {
  color: #edf4ef;
  background: #1a211c;
  border-color: #344139;
}
html[data-theme="dark"] .record-preview-shell .user-access-card > summary:hover,
html[data-theme="dark"] .record-preview-shell .user-access-card[open] > summary { background: #202922; }
html[data-theme="dark"] .record-preview-shell .user-access-expanded,
html[data-theme="dark"] .record-preview-shell :is(.user-vehicle-section, .tablet-login-editor > form) { border-color: #344139; }
html[data-theme="dark"] .record-preview-shell :is(.user-access-identity strong, .work-area-choice strong, .tablet-login-editor > summary strong) { color: #edf4ef; }
html[data-theme="dark"] .record-preview-shell :is(.user-access-identity small, .work-area-choice small, .tablet-login-editor > summary small, .vehicle-assignment-empty, .vehicle-assignment-complete) { color: #a8b5ac; }
html[data-theme="dark"] .record-preview-shell .user-access-row-facts span { color: #cbd7ce; background: #29332c; }
html[data-theme="dark"] .record-preview-shell .work-area-choice.selected { border-color: #4b9e5d; background: #203b27; }
html[data-theme="dark"] .record-preview-shell .work-area-choice-icon { color: #b9c7bc; background: #29332c; }
html[data-theme="dark"] .record-preview-shell .work-area-choice.selected .work-area-choice-icon { color: #a7e6b4; background: #31513a; }
html[data-theme="dark"] .record-preview-shell .work-area-choice i { border-color: #526158; background: #151b17; }
html[data-theme="dark"] .record-preview-shell .assigned-vehicle-list label { border-color: #405548; background: #223229; }
html[data-theme="dark"] .record-preview-shell .assigned-vehicle-list label:hover { border-color: #985b5b; background: #352222; }
html[data-theme="dark"] .record-preview-shell .assigned-vehicle-list span { color: #dce7df; }
html[data-theme="dark"] .record-preview-shell .assigned-vehicle-list i { color: #f0a0a0; }
html[data-theme="dark"] .record-preview-shell .vehicle-assignment-add > span { color: #cbd7ce; }

html[data-theme="dark"] .record-preview-shell :is(.admin-events-table .load-row:hover td, .admin-events-table .load-row:focus td, .deployment-list-row:hover td, .deployment-list-row:focus td, .deployment-list-row.is-selected td, .planning-wayline-list button.active, .field-navigator-item.active, .field-list-item.active) {
  color: #dff3e3;
  background: #253a2b;
}

html[data-theme="dark"] .record-preview-shell :is(.field-folder-title, .field-owner-title) {
  color: #a8b5ac;
  background: #141a16;
  border-color: #344139;
}

html[data-theme="dark"] .record-preview-shell :is(.planning-wayline-list, .planning-coverage-control, .fendt-field-comparison, .map-canvas, .leaflet-map, .tank-level-track) {
  background: #0e130f;
  border-color: #344139;
}

html[data-theme="dark"] .record-preview-shell .field-map-label { color: #e1e6ed; background: rgba(25, 29, 35, .92); border-color: rgba(175, 184, 197, .42); }
html[data-theme="dark"] .record-preview-shell .field-map-label.inactive { color: #a6b1ad; background: rgba(43, 47, 53, .9); border-color: rgba(166, 177, 173, .35); }
html[data-theme="dark"] .record-preview-shell .field-map-label.selected { color: #fff; background: rgba(39, 121, 60, .95); border-color: #8ddd9d; }
html[data-theme="dark"] .record-preview-shell .leaflet-tile-pane img { filter: brightness(.76) contrast(.94) saturate(.82); }
html[data-theme="dark"] .record-preview-shell :is(.leaflet-control-zoom a, .leaflet-control-layers) { color: #edf4ef; background: #202720; border-color: #3b4940; }
html[data-theme="dark"] .record-preview-shell .leaflet-control-zoom a:hover { background: #2a342c; }
html[data-theme="dark"] .record-preview-shell .leaflet-control-attribution { color: #a8b5ac; background: rgba(17, 22, 18, .82); }
html[data-theme="dark"] .record-preview-shell .toast-item { color: #edf4ef; background: #242c26; }

html[data-theme="dark"] .record-preview-shell * { scrollbar-color: #59665d #141a16; }
html[data-theme="dark"] .record-preview-shell ::selection { color: #f7fbf8; background: #2c9344; }

html[data-theme="dark"] #field-dispatch-overlay-host {
  color-scheme: dark;
  --bg: #111612;
  --panel: #1a211c;
  --text: #edf4ef;
  --muted: #a8b5ac;
  --line: #344139;
  --brand: #61c475;
  --brand-2: #299442;
}

html[data-theme="dark"] #field-dispatch-overlay-host .field select,
html[data-theme="dark"] #field-dispatch-overlay-host .field textarea,
html[data-theme="dark"] #field-dispatch-overlay-host option {
  color: #edf4ef;
  background: #111612;
  border-color: #445248;
}

@media (max-width: 520px) {
  .record-preview-shell .settings-page { gap: 9px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .settings-page-heading { padding: 5px 6px 2px; }
  .settings-page-heading h1 { font-size: 1.35rem; }
  .settings-page-heading p { font-size: 0.76rem; }
  .settings-card { padding: 13px; border-radius: 15px; box-shadow: 0 5px 16px rgba(22, 44, 31, 0.06); }
  .settings-card-heading { gap: 10px; }
  .settings-card-heading h2,
  .settings-signout h2,
  .settings-password-card summary h2 { font-size: 0.95rem; }
  .settings-card-heading p,
  .settings-signout p,
  .settings-password-card summary p { font-size: 0.68rem; }
  .settings-card-icon { width: 38px; height: 38px; flex-basis: 38px; }
  .settings-card-icon svg { width: 20px; height: 20px; }
  .settings-vehicle { margin-top: 12px; }
  .settings-vehicle > div { grid-template-columns: 74px minmax(0, 1fr); min-height: 60px; padding: 2px 8px; }
  .settings-vehicle img { width: 70px; height: 52px; }
  .settings-vehicle .account-vehicle-control select { min-height: 43px; font-size: 0.82rem; }
  .settings-account-facts { gap: 6px; margin-top: 9px; }
  .settings-account-facts > div { display: grid; justify-items: start; gap: 5px; padding: 8px; }
  .settings-fact-icon { width: 28px; height: 28px; flex-basis: 28px; }
  .settings-account-facts small { font-size: 0.58rem; }
  .settings-account-facts strong { font-size: 0.72rem; }
  .settings-summary-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; margin-top: 8px; padding: 9px; }
  .settings-card-icon.small { width: 34px; height: 34px; flex-basis: 34px; }
  .settings-summary-row strong { font-size: 0.76rem; }
  .settings-summary-row p { font-size: 0.64rem; }
  .settings-count { font-size: 0.62rem; }
  .settings-summary-row.compact { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .settings-last-login { font-size: 0.66rem; }
  .settings-weekend-loads { margin-top: 8px; }
  .settings-weekend-loads > header { padding: 9px 10px; }
  .settings-weekend-row { grid-template-columns: 62px repeat(2, minmax(0, 1fr)); }
  .settings-weekend-label { padding: 8px; font-size: 0.58rem; }
  .settings-weekend-day { column-gap: 5px; padding: 7px 8px; }
  .settings-weekend-day > span { font-size: 0.64rem; }
  .settings-weekend-day > span small { font-size: 0.54rem; }
  .settings-weekend-day > strong { font-size: 0.95rem; }
  .settings-data-card .permission-toggle { margin: 10px 0 0 48px; }
  .settings-data-card .permission-toggle strong { font-size: 0.74rem; }
  .settings-data-card .permission-toggle small { font-size: 0.64rem; }
  .settings-theme-options { grid-template-columns: 1fr; gap: 6px; margin: 10px 0 0 48px; }
  .settings-theme-options button { min-height: 58px; grid-template-columns: 27px minmax(0, 1fr); padding: 8px 10px; }
  .settings-report-card .field { margin-left: 48px; }
  .settings-report-card button { width: calc(100% - 48px); margin-left: 48px; }
  .settings-password-card summary { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; padding: 13px; }
  .settings-password-card > form { padding: 0 13px 13px; }
  .settings-password-card > form .grid.two { grid-template-columns: 1fr; }
  .settings-signout { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; }
  .settings-signout button { min-height: 38px; padding: 0 11px; font-size: 0.72rem; }
}

/* Keep room for the corner sync state after responsive bailing card rules. */
.baling-data-table tr[data-action] {
  padding-bottom: 34px;
}

.baling-data-table tr.baling-record-row,
.baling-data-table tr.baling-record-row[data-action] {
  display: block;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line) 78%, var(--info));
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel) 88%, var(--bg));
}

.baling-data-table tr.baling-record-row.selected {
  border-color: color-mix(in srgb, var(--info) 55%, var(--line));
  background: color-mix(in srgb, var(--info) 7%, var(--panel));
}

.baling-data-table tr.baling-record-row.baling-record-returned .baling-record-card {
  animation: baling-record-return-highlight 1.8s ease-out;
}

@keyframes baling-record-return-highlight {
  0%, 35% { box-shadow: 0 0 0 3px rgba(54, 139, 207, .75); }
  100% { box-shadow: 0 0 0 0 rgba(54, 139, 207, 0); }
}

.baling-data-table td.baling-record-cell {
  display: block;
  width: 100%;
  padding: 0;
  color: var(--text);
}

.baling-data-table td.baling-record-cell::before {
  content: none;
}

.baling-record-card {
  display: grid;
}

.baling-record-card-heading {
  display: grid;
  grid-template-columns: 110px minmax(220px, 1fr) 110px auto;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
}

.baling-record-date,
.baling-record-identity,
.baling-record-total {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
}

.baling-record-card-heading span,
.baling-record-metrics span {
  color: var(--muted);
  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.baling-record-date strong {
  line-height: 1.15;
}

.baling-record-identity > strong {
  overflow: hidden;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.baling-record-identity small {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  color: var(--muted);
}

.baling-record-total {
  justify-items: end;
}

.baling-record-total strong {
  color: var(--brand-2);
  font-size: 1.35rem;
  line-height: 1;
}

.baling-record-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 58px;
}

.baling-data-table .baling-record-card-actions .sync-check,
.baling-data-table .baling-record-card-actions .baling-sync-pending {
  position: static;
}

.baling-record-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 54%, var(--panel));
}

.baling-record-metrics > div {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  padding: 9px 14px;
  border-right: 1px solid var(--line);
}

.baling-record-metrics > div:last-child {
  border-right: 0;
}

.baling-record-metrics strong {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.baling-record-metrics small {
  overflow: hidden;
  color: var(--muted);
  font-size: .68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .baling-record-card-heading {
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 10px;
  }

  .baling-record-total {
    grid-column: 3;
    grid-row: 1;
  }

  .baling-record-card-actions {
    grid-column: 3;
    grid-row: 2;
  }

  .baling-record-card-actions:has(.baling-row-resume-action) {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-content: stretch;
  }

  .baling-row-resume-action {
    flex: 1 1 auto;
  }

  .baling-record-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .baling-record-metrics > div {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
  }

  .baling-record-metrics > div:nth-child(2n) {
    border-right: 0;
  }

  .baling-record-metrics > div:last-child {
    grid-column: 1 / -1;
    border-bottom: 0;
  }
}

.muck-spreading-entry {
  margin-bottom: 12px;
}

.muck-spreading-entry .baling-detected-field {
  margin-bottom: 16px;
}

.muck-spreading-form {
  margin-top: 12px;
}

.muck-manual-launcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: min(1180px, 100%);
  margin: 0 auto 12px;
}

.muck-manual-launcher > div {
  display: grid;
  gap: 2px;
}

.muck-manual-launcher small {
  color: var(--muted);
}

.muck-manual-sidebar .section-title {
  align-items: flex-start;
}

.muck-manual-sidebar .section-title button {
  min-height: 34px;
}

.muck-manual-editor {
  width: min(500px, calc(100% - 24px));
}

.muck-manual-map-form {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 0;
  border: 0;
}

.muck-manual-map-form .grid {
  gap: 8px;
}

.muck-manual-map-form .field {
  margin: 0;
}

.muck-manual-map-form .muck-manual-type {
  grid-column: 1 / -1;
}

.muck-manual-map-form > button {
  width: 100%;
}

.muck-manual-contributors {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.muck-manual-contributors legend {
  padding: 0 5px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
}

.muck-manual-lines {
  display: grid;
  gap: 8px;
}

.muck-manual-contributor-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) minmax(0, .9fr) minmax(105px, .58fr) 30px;
  align-items: end;
  gap: 8px;
}

.muck-manual-contributor-row > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  margin-bottom: 7px;
  border-radius: 50%;
  color: var(--info);
  background: color-mix(in srgb, var(--info) 12%, var(--panel));
  font-size: .7rem;
  font-weight: 900;
}

.muck-manual-line-remove {
  width: 30px;
  height: 38px;
  padding: 0;
  color: var(--danger);
  font-size: 1.15rem;
}

.muck-manual-line-add {
  justify-self: start;
  color: var(--info);
}

.muck-manual-line-add > span {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  margin-right: 4px;
  border-radius: 50%;
  color: #fff;
  background: var(--info);
  font-weight: 900;
}

.muck-manual-batch {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.muck-manual-batch-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.muck-manual-batch-heading > div {
  display: grid;
  gap: 2px;
}

.muck-manual-batch-heading small,
.muck-manual-batch-empty {
  color: var(--muted);
  font-size: .7rem;
}

.muck-manual-batch-heading > span {
  color: var(--ok);
  font-weight: 900;
  white-space: nowrap;
}

.muck-manual-batch-heading > div:last-child {
  display: grid;
  justify-items: end;
  gap: 3px;
}

.muck-manual-batch-heading em {
  font-style: normal;
}

.muck-manual-batch-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.muck-manual-batch-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 8px 9px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--ok) 5%, var(--panel));
}

.muck-manual-batch-list article:last-child {
  border-bottom: 0;
}

.muck-manual-batch-list article > div {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
}

.muck-manual-batch-list article > div:last-child {
  justify-items: end;
}

.muck-manual-batch-list small,
.muck-manual-batch-list span {
  overflow: hidden;
  color: var(--muted);
  font-size: .68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.muck-manual-batch-list span b {
  color: var(--text);
}

.muck-manual-batch-list .link-button {
  font-size: .68rem;
}

.muck-manual-save-batch {
  width: 100%;
  touch-action: manipulation;
}

.muck-manual-batch-empty {
  margin: 0;
}

.muck-manual-prompt {
  display: grid;
  gap: 10px;
}

.muck-manual-prompt > div > p {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.4;
}

.muck-manual-entry {
  margin-bottom: 12px;
  padding: 0;
  overflow: hidden;
}

@media (max-width: 840px) {
  .muck-manual-editor {
    max-height: 70% !important;
  }

  .muck-manual-map-form .grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .muck-manual-launcher {
    align-items: stretch;
    flex-direction: column;
  }

  .muck-manual-launcher button {
    width: 100%;
  }

  .muck-manual-map-form .grid.two {
    grid-template-columns: minmax(0, 1fr);
  }

  .muck-manual-map-form .muck-manual-type {
    grid-column: auto;
  }

  .muck-manual-contributor-row {
    grid-template-columns: 22px minmax(0, 1fr) 30px;
    align-items: center;
  }

  .muck-manual-contributor-row > span {
    grid-row: 1;
    align-self: end;
  }

  .muck-manual-contributor-row > .field {
    grid-column: 2;
  }

  .muck-manual-line-remove {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
  }
}

.muck-manual-entry > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
}

.muck-manual-entry > summary::-webkit-details-marker {
  display: none;
}

.muck-manual-entry > summary > span:first-child {
  display: grid;
  gap: 2px;
}

.muck-manual-entry > summary small {
  color: var(--muted);
}

.muck-manual-entry .summary-action {
  color: var(--info);
  font-size: .76rem;
  font-weight: 800;
}

.muck-manual-entry > .form {
  margin: 0;
  padding: 14px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.muck-day-total,
.muck-customer-total {
  display: grid;
  justify-items: end;
  gap: 1px;
}

.muck-day-total span,
.muck-customer-total span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.muck-day-total strong,
.muck-customer-total strong {
  color: var(--info);
  font-size: 1rem;
}

.muck-daily-summary {
  padding: 12px;
}

.muck-daily-summary > .section-title {
  margin-bottom: 8px;
}

.muck-daily-summary > .section-title h2 {
  font-size: 1.05rem;
}

.muck-customer-list {
  display: grid;
  gap: 12px;
}

.muck-customer-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.muck-customer-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--info) 9%, var(--panel));
}

.muck-customer-card > header span {
  color: var(--muted);
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.muck-customer-card > header h3 {
  margin: 2px 0 0;
  font-size: 1rem;
}

.muck-summary-table-wrap {
  min-width: 0;
  overflow-x: hidden;
}

.report-unassigned-row > td {
  background: color-mix(in srgb, var(--danger) 11%, var(--panel)) !important;
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
}

.report-unassigned-row > td:first-child {
  box-shadow: inset 3px 0 color-mix(in srgb, var(--danger) 72%, transparent);
}

.report-unassigned-row td:first-child {
  color: color-mix(in srgb, var(--danger) 86%, var(--text));
}

.report-unassigned-warning {
  display: block;
  margin-top: 2px;
  color: var(--danger);
  font-size: .64rem;
  font-weight: 800;
}

.muck-summary-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.muck-summary-table thead th {
  padding: 7px 12px;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
}

.muck-summary-table thead th:first-child { width: 36%; }
.muck-summary-table thead th:nth-child(2) { width: 44%; }
.muck-summary-table thead th:last-child {
  width: 20%;
  text-align: right;
}

.muck-summary-field-row th {
  padding: 0;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--ok) 11%, var(--panel));
  text-align: left;
}

.muck-summary-field-row th > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 8px 12px 8px 14px;
  border-left: 4px solid var(--ok);
}

.muck-summary-field-name,
.muck-summary-field-total {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.muck-summary-field-name > small,
.muck-summary-field-total > small {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.muck-summary-field-name > strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 1rem;
}

.muck-summary-field-total {
  flex: 0 0 auto;
  justify-items: end;
}

.muck-summary-field-total > strong {
  color: var(--ok);
  font-size: 1rem;
}

.muck-summary-type-row td {
  padding: 8px 12px;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  vertical-align: middle;
}

.muck-summary-type-row td:first-child {
  padding-left: 20px;
}

.muck-summary-type-row td:last-child {
  text-align: right;
}

.muck-recorded-weights {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.muck-recorded-weights span {
  max-width: 100%;
  padding: 1px 5px;
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--info) 10%, var(--panel));
  font-size: .7rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.muck-recorded-weights span > strong {
  color: var(--info);
  font-weight: 850;
}

@media (max-width: 520px) {
  .muck-daily-summary {
    padding: 10px;
  }

  .muck-daily-summary > .section-title {
    align-items: flex-start;
  }

  .muck-customer-card > header {
    padding: 9px 10px;
  }

  .muck-summary-table thead th {
    padding: 6px 8px;
    font-size: .6rem;
  }

  .muck-summary-table thead th:first-child { width: 34%; }
  .muck-summary-table thead th:nth-child(2) { width: 42%; }
  .muck-summary-table thead th:last-child { width: 24%; }

  .muck-summary-field-row th {
    padding: 7px 9px;
  }

  .muck-summary-field-row th > div {
    min-height: 48px;
    padding: 7px 9px 7px 10px;
  }

  .muck-summary-type-row td {
    padding: 7px 8px;
    font-size: .75rem;
    overflow-wrap: anywhere;
  }

  .muck-summary-type-row td:first-child {
    padding-left: 12px;
  }

  .muck-recorded-weights span {
    padding: 2px 5px;
    font-size: .7rem;
  }
}
.muck-reports-section {
  margin-top: 18px;
}

.muck-reports-section > .section-title p {
  max-width: 680px;
  margin: 4px 0 0;
  color: var(--muted);
}

.muck-report-form {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--info) 5%, var(--panel));
}

.baling-customer-report {
  display: grid;
  gap: 12px;
}

.baling-customer-report-heading > div {
  display: grid;
  gap: 3px;
}

.baling-customer-report-heading small,
.baling-customer-report label small {
  color: var(--muted);
  font-weight: 500;
}

.baling-customer-report .grid {
  gap: 10px;
}

.baling-customer-report > button {
  justify-self: start;
}

.baling-straw-report {
  border-color: color-mix(in srgb, var(--ok) 34%, var(--line));
  background: color-mix(in srgb, var(--ok) 7%, var(--panel));
}

.baling-straw-report > small { margin-top: -4px; }

.baling-report-years {
  display: grid;
  gap: 18px;
}

.baling-report-year {
  display: grid;
  gap: 8px;
}

.baling-report-year-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px;
}

.baling-report-year-heading h3 {
  margin: 0;
}

.baling-report-year-heading small {
  color: var(--muted);
}

.muck-reports-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
  border-radius: 16px;
  color: white;
  background:
    radial-gradient(circle at 92% 12%, rgb(255 255 255 / 12%), transparent 34%),
    linear-gradient(135deg, #0b4035, #126651);
  box-shadow: 0 12px 30px rgb(8 54 44 / 16%);
}

.muck-reports-hero h2 {
  margin: 3px 0 5px;
  color: white;
}

.muck-reports-hero p {
  max-width: 650px;
  margin: 0;
  color: rgb(255 255 255 / 78%);
}

.muck-reports-hero .eyebrow {
  color: #bcebdc;
}

.muck-custom-report {
  margin: 12px 0 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.muck-custom-report > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
}

.muck-custom-report > summary::-webkit-details-marker {
  display: none;
}

.muck-custom-report > summary > span:first-child {
  display: grid;
  gap: 2px;
}

.muck-custom-report > summary small {
  color: var(--muted);
}

.muck-custom-report .summary-action {
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  font-size: .76rem;
  font-weight: 800;
}

.muck-custom-report[open] .summary-action {
  color: var(--muted);
}

.muck-custom-report .muck-report-form {
  margin: 0;
  border-width: 1px 0 0;
  border-radius: 0;
}

.muck-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 14px;
}

.muck-event-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 8px 22px rgb(15 37 32 / 7%);
}

.muck-event-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 13px;
}

.muck-event-card h3 {
  margin: 3px 0 0;
  font-size: 1.15rem;
}

.muck-event-total {
  display: grid;
  justify-items: end;
  gap: 2px;
  flex: 0 0 auto;
}

.muck-event-total span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.muck-event-total strong {
  color: var(--accent);
  font-size: 1.25rem;
}

.muck-event-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 4%, var(--panel));
}

.muck-event-metrics > span {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 9px 6px;
  border-right: 1px solid var(--line);
}

.muck-event-metrics > span:last-child {
  border-right: 0;
}

.muck-event-metrics strong {
  font-size: 1.05rem;
}

.muck-event-metrics small {
  color: var(--muted);
  font-size: .7rem;
}

.muck-event-fields,
.muck-event-team {
  padding: 13px 16px 0;
}

.muck-event-fields h4,
.muck-event-team h4 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.muck-event-fields > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.muck-event-fields > div > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.muck-event-fields small,
.muck-event-team small {
  color: var(--muted);
  font-size: .7rem;
}

.muck-event-fields b {
  flex: 0 0 auto;
  color: var(--accent);
}

.muck-event-team > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.muck-event-team > div > span {
  display: grid;
  gap: 1px;
  padding: 7px 9px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--ok) 8%, var(--panel));
}

.muck-event-report-button {
  width: calc(100% - 32px);
  margin: 14px 16px 16px;
}

.muck-event-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.muck-event-list-heading,
.muck-event-row {
  display: grid;
  grid-template-columns: 120px minmax(180px, 1fr) minmax(220px, 1.2fr) 100px 20px;
  align-items: center;
  gap: 14px;
}

.muck-event-list-heading {
  padding: 9px 14px;
  color: var(--muted);
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.muck-event-row {
  width: 100%;
  min-height: 66px;
  padding: 11px 14px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  color: var(--text);
  background: var(--panel);
  text-align: left;
}

.muck-event-row:hover {
  background: color-mix(in srgb, var(--accent) 4%, var(--panel));
}

.muck-spreading-event-list .muck-event-list-heading {
  grid-template-columns: 42px 120px minmax(180px, 1fr) minmax(220px, 1.2fr) 100px 20px;
}

.muck-selection-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 10px;
}

.muck-selection-bar > span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 750;
}

.muck-event-row-wrap {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  border-top: 1px solid var(--line);
}

.muck-event-row-wrap .muck-event-row {
  border-top: 0;
}

.muck-event-select {
  display: grid;
  place-items: center;
  align-self: stretch;
  cursor: pointer;
}

.muck-event-select input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--brand);
}

.muck-event-row-customer,
.muck-event-row-team {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.baling-event-row {
  min-height: 78px;
}

.baling-event-field-count {
  line-height: 1.1;
}

.baling-event-locations {
  overflow: hidden;
  color: color-mix(in srgb, var(--text) 78%, var(--muted)) !important;
  font-size: .76rem !important;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.muck-event-row small {
  color: var(--muted);
  font-size: .7rem;
}

.muck-event-row-team strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.muck-event-row-total {
  display: grid;
  gap: 2px;
  color: var(--accent);
  font-weight: 850;
  text-align: right;
}

.muck-event-row-arrow {
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  text-align: right;
}

/* The redesigned app is intentionally light. Keep report lists independent
   from the legacy app's OS-driven dark palette on Windows. */
.record-preview-shell .muck-event-list,
.record-preview-shell .muck-event-row-wrap,
.record-preview-shell .muck-event-row {
  color: var(--record-ink);
  border-color: var(--record-line);
  background: #ffffff;
}

.record-preview-shell .muck-event-list-heading {
  color: #667085;
  background: #f0f7f1;
}

.record-preview-shell .muck-event-row:hover,
.record-preview-shell .muck-event-row:focus-visible {
  background: #f6faf7;
}

.record-preview-shell .muck-event-row small,
.record-preview-shell .muck-event-row-arrow,
.record-preview-shell .muck-selection-bar > span {
  color: var(--record-muted);
}

.record-preview-shell .muck-event-row-total {
  color: var(--record-green-deep);
}

.record-preview-shell .deployments-hub,
.record-preview-shell .deployments-sidebar,
.record-preview-shell .deployment-editor-dock,
.record-preview-shell .deployment-field-picker,
.record-preview-shell .deployment-editor-form {
  color: var(--record-ink);
}

.record-preview-shell .deployments-sidebar,
.record-preview-shell .deployment-editor-dock {
  border-color: var(--record-line);
  background: rgba(255, 255, 255, 0.97);
}

.record-preview-shell .deployment-navigator-item {
  color: var(--record-ink);
  border-color: var(--record-line);
  background: transparent;
}

.record-preview-shell .deployment-navigator-item small,
.record-preview-shell .deployment-map-toolbar-title small,
.record-preview-shell .deployment-field-options small,
.record-preview-shell .deployment-totals span,
.record-preview-shell .deployment-editor-head p {
  color: var(--record-muted);
}

.record-preview-shell .deployment-navigator-item:hover,
.record-preview-shell .deployment-navigator-item:focus-visible,
.record-preview-shell .deployment-navigator-item.active {
  color: var(--record-ink);
  background: var(--record-green-soft);
}

.record-preview-shell .deployment-field-options label {
  color: var(--record-ink);
  border-color: var(--record-line);
  background: #ffffff;
}

.record-preview-shell .deployment-field-options .deployment-field-id,
.record-preview-shell .deployment-editor-head h2,
.record-preview-shell .deployment-field-picker h3,
.record-preview-shell .deployment-editor-form .field label {
  color: var(--record-ink);
}

.record-preview-shell .deployment-editor-form input:not([type="checkbox"]):not([type="radio"]),
.record-preview-shell .deployment-editor-form select,
.record-preview-shell .deployment-editor-form textarea,
.record-preview-shell .deployment-navigator-search input,
.record-preview-shell .deployment-field-picker input[type="search"] {
  color: var(--record-ink);
  border-color: var(--record-line);
  background: #ffffff;
}

.record-preview-shell .deployment-editor-form input::placeholder,
.record-preview-shell .deployment-editor-form textarea::placeholder,
.record-preview-shell .deployment-navigator-search input::placeholder,
.record-preview-shell .deployment-field-picker input::placeholder {
  color: #8a938e;
}

.record-preview-shell .deployment-totals {
  color: var(--record-ink);
  border-color: var(--record-line);
  background: #f5f8f7;
}

.muck-event-back {
  margin-bottom: 12px;
}

.muck-event-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px;
  border-radius: 14px;
  color: white;
  background: linear-gradient(135deg, #0b4035, #126651);
}

.muck-event-detail-heading h2 {
  margin: 3px 0 5px;
  color: white;
}

.muck-event-detail-heading p {
  margin: 0;
  color: rgb(255 255 255 / 76%);
}

.muck-event-detail-heading > div:last-child {
  display: grid;
  justify-items: end;
  gap: 3px;
  flex: 0 0 auto;
}

.muck-event-detail-heading > div:last-child span {
  color: rgb(255 255 255 / 70%);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.muck-event-detail-heading > div:last-child strong {
  font-size: 1.45rem;
}

.muck-report-field-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.muck-record-edit-form {
  margin-top: 14px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
}

.muck-report-field-detail {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
}

.muck-report-field-detail > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
}

.muck-report-field-detail > header span {
  color: var(--muted);
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.muck-report-field-detail > header h3 {
  margin: 2px 0 0;
  font-size: 1rem;
}

.muck-report-field-detail > header > strong {
  color: var(--accent);
}

.muck-report-field-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.muck-report-field-actions > strong {
  color: var(--accent);
  white-space: nowrap;
}

.muck-record-add-form {
  padding: 13px 14px 14px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background: color-mix(in srgb, var(--accent) 3%, var(--panel));
}

.muck-record-add-heading strong,
.muck-record-add-heading span {
  display: block;
}

.muck-record-add-heading span {
  margin-top: 2px;
  color: var(--muted);
  font-size: .8rem;
}

.muck-record-add-grid {
  display: grid;
  grid-template-columns: minmax(110px, .6fr) minmax(180px, 1.2fr) minmax(180px, 1.2fr) minmax(130px, .7fr);
  gap: 10px;
  margin-top: 11px;
}

.muck-record-add-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 11px;
}

.muck-report-field-detail .table-wrap {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.muck-event-detail > .muck-event-report-button {
  width: auto;
  margin: 14px 0 0;
}

@media (max-width: 760px) {
  .muck-reports-section {
    margin-top: 14px;
  }

  .muck-report-form {
    padding: 12px;
  }

  .muck-reports-hero {
    padding: 16px;
  }

  .muck-reports-hero .status {
    display: none;
  }

  .muck-events-grid {
    grid-template-columns: 1fr;
  }

  .muck-event-card > header {
    padding: 14px 14px 12px;
  }

  .muck-event-fields,
  .muck-event-team {
    padding-inline: 14px;
  }

  .muck-event-report-button {
    width: calc(100% - 28px);
    margin-inline: 14px;
  }

  .muck-event-list-heading {
    display: none;
  }

  .muck-event-row {
    grid-template-columns: 82px minmax(0, 1fr) auto 14px;
    gap: 8px;
    min-height: 78px;
    padding: 11px 12px;
  }

  .muck-report-field-detail > header {
    align-items: flex-start;
  }

  .muck-report-field-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
  }

  .muck-record-add-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .muck-record-add-actions > * {
    flex: 1;
  }

  .muck-event-row-wrap {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .muck-event-row-wrap .muck-event-row {
    grid-template-columns: 70px minmax(0, 1fr) auto 12px;
  }

  .muck-selection-bar {
    justify-content: space-between;
  }

  .muck-event-row-date {
    grid-row: 1 / span 2;
    font-size: .78rem;
  }

  .muck-event-row-customer {
    grid-column: 2;
  }

  .muck-event-row-team {
    grid-column: 2 / 4;
  }

  .muck-event-row-total {
    grid-column: 3;
    grid-row: 1;
  }

  .muck-event-row-arrow {
    grid-column: 4;
    grid-row: 1 / span 2;
  }

  .muck-event-detail-heading {
    padding: 15px;
  }

  .muck-event-detail-heading > div:last-child strong {
    font-size: 1.15rem;
  }

  .muck-report-field-detail table,
  .muck-report-field-detail tbody,
  .muck-report-field-detail tr,
  .muck-report-field-detail td {
    display: block;
    width: 100%;
  }

  .muck-report-field-detail thead {
    display: none;
  }

  .muck-report-field-detail tr {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
  }

  .muck-report-field-detail tr:last-child {
    border-bottom: 0;
  }

  .muck-report-field-detail td {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
    padding: 3px 0;
    border: 0;
  }

  .muck-report-field-detail td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
  }
}
.baling-boundary-missing {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .3rem;
}

.baling-boundary-missing small {
  color: var(--danger);
}

.baling-boundary-missing .compact {
  min-height: 1.8rem;
  padding: .2rem .55rem;
}
.diesel-page {
  display: grid;
  gap: 14px;
  width: min(100%, 980px);
  margin: 0 auto;
}

.record-preview-shell .admin-design-diesel .diesel-page {
  width: 100%;
  max-width: none;
  margin: 0;
}

.diesel-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.diesel-summary-card {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.diesel-summary-card span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.diesel-summary-card strong {
  color: var(--accent);
  font-size: 1.35rem;
}

.diesel-summary-card.adblue strong {
  color: #5aa9ff;
}

.diesel-entry-form,
.diesel-history {
  margin: 0;
}

.diesel-entry-fields {
  display: grid;
  grid-template-columns: 180px 150px 150px minmax(220px, 1fr);
  align-items: end;
  gap: 12px;
}

.diesel-activity-detail {
  grid-column: 4;
}

.diesel-entry-fields button {
  grid-column: 1 / -1;
  justify-self: end;
  min-width: 110px;
}

.diesel-table th:nth-child(1) { width: 150px; }
.diesel-table th:nth-child(2) { width: 85px; }
.diesel-table th:nth-child(3) { width: 100px; }
.diesel-table th:nth-child(4) { width: 120px; }
.diesel-table th:nth-child(6) { width: 110px; }
.diesel-table th:nth-child(7) { width: 70px; }

.diesel-table td small {
  display: block;
  color: var(--muted);
  font-size: .72rem;
}

.diesel-entry-litres {
  color: var(--accent);
}

.diesel-fill-fluids,
.diesel-fill-quantities {
  display: grid;
  justify-items: start;
  gap: 5px;
}

.diesel-fill-quantities > span {
  display: grid;
  gap: 1px;
}

.diesel-fill-quantities small {
  font-size: .62rem;
  line-height: 1;
}

.diesel-fluid-badge {
  display: inline-flex;
  padding: 3px 7px;
  border-radius: 999px;
  color: #f4c96b;
  background: color-mix(in srgb, #d99b1c 18%, transparent);
  font-size: .7rem;
  font-weight: 850;
}

.diesel-fluid-badge.adblue {
  color: #79baff;
  background: color-mix(in srgb, #2789e8 18%, transparent);
}

.diesel-fluid-badge.white {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 12%, transparent);
}

.diesel-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 680px) {
  .diesel-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .diesel-entry-fields {
    grid-template-columns: 1fr;
  }

  .diesel-activity-detail,
  .diesel-entry-fields button {
    grid-column: 1;
    width: 100%;
  }

  .diesel-history .section-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .diesel-history .table-wrap {
    overflow: visible;
    border: 0;
  }

  .diesel-table,
  .diesel-table tbody {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 7px;
    background: transparent;
  }

  .diesel-table thead {
    display: none;
  }

  .diesel-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px 10px;
    padding: 8px 9px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
  }

  .diesel-table td {
    display: grid;
    align-content: start;
    min-width: 0;
    padding: 0;
    border: 0;
    overflow-wrap: anywhere;
    font-size: .78rem;
  }

  .diesel-table td::before {
    content: attr(data-label);
    margin-bottom: 1px;
    color: var(--muted);
    font-size: .54rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .diesel-table td:nth-child(5) {
    grid-column: 1 / -1;
  }

  .diesel-table td:nth-child(7) {
    justify-items: end;
  }

  .diesel-table td small {
    font-size: .62rem;
  }

  .diesel-table .diesel-fill-fluids,
  .diesel-table .diesel-fill-quantities {
    gap: 2px;
  }

  .diesel-table .diesel-fluid-badge {
    padding: 2px 5px;
    font-size: .6rem;
  }

  .diesel-table .danger-link.compact {
    min-height: 28px;
    padding: 2px 6px;
    font-size: .66rem;
  }
}
.satellite-load-control button,
.baling-gps-load-satellite {
  width: auto;
  min-width: 0;
  white-space: nowrap;
}

.satellite-load-control button {
  padding: 8px 10px;
  color: #fff;
  background: #2c669d;
  border: 0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.baling-gps-load-satellite {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Desktop web uses the familiar top navigation. Pointer-based targeting keeps
   the landscape tablet workspace and its side rail unchanged. */
.record-preview-shell button.ghost {
  border-color: #d8e1da;
  color: #31573a;
  background: #f8fbf8;
}

.record-preview-shell button.ghost:hover:not(:disabled) {
  border-color: #b9c9bd;
  color: #174d24;
  background: #edf6ee;
}

.record-preview-shell button.ghost:disabled {
  border-color: #e1e6e3;
  color: #8b9690;
  background: #f1f4f2;
}

.record-preview-shell .admin-events-table .load-day-divider td {
  color: #205b35;
  background: #edf6f0;
  border-top-color: #2e8d4a;
  border-bottom-color: #d7e5da;
}

.record-preview-shell .admin-events-table .load-day-divider strong {
  color: #1f6f38;
  background: #dceee1;
}

.record-preview-shell .admin-events-table .load-row:hover td,
.record-preview-shell .admin-events-table .load-row:focus td {
  color: var(--record-ink);
  background: #f1f8f3;
}

.record-preview-shell .nav button:hover:not(.active),
.record-preview-shell .nav-menu-trigger:hover:not(.active) {
  color: #1f7133;
  background: transparent;
}

.record-preview-shell .nav-menu-items button {
  color: #3f5047;
  background: transparent;
}

.record-preview-shell .nav-menu-items button:hover,
.record-preview-shell .nav-menu-items button:focus-visible {
  color: #174d24;
  background: #e8f3ea;
}

.record-preview-shell .muck-design-entry-panel input,
.record-preview-shell .muck-design-entry-panel select,
.record-preview-shell .muck-manual-map-form input,
.record-preview-shell .muck-manual-map-form select,
.record-preview-shell .muck-manual-map-form textarea {
  border-color: #d9e1dc;
  color: #1d232c;
  background: #fff;
}

.record-preview-shell .muck-design-entry-panel input::placeholder,
.record-preview-shell .muck-manual-map-form input::placeholder,
.record-preview-shell .muck-manual-map-form textarea::placeholder {
  color: #87918c;
}

.record-preview-shell .muck-design-entry-panel select option,
.record-preview-shell .muck-manual-map-form select option {
  color: #1d232c;
  background: #fff;
}

/* The redesigned Baling page stays light even when the device uses dark mode. */
.record-preview-shell .baling-design-filters select {
  color-scheme: light;
  border-color: #d9e1dc;
  color: #1d232c;
  background: #fff;
  -webkit-text-fill-color: #1d232c;
}

.record-preview-shell .baling-design-filters select:focus {
  border-color: #52a963;
  box-shadow: 0 0 0 3px rgba(36, 145, 58, .11);
}

.record-preview-shell .baling-design-filters select option {
  color: #1d232c;
  background: #fff;
}

.record-preview-shell #em-compliance-form select,
.record-preview-shell .bulk-em-checks select {
  border-color: #d9e1dc;
  color: #1d232c;
  background: #fff;
}

.record-preview-shell #em-compliance-form select:focus,
.record-preview-shell .bulk-em-checks select:focus {
  border-color: #52a963;
  box-shadow: 0 0 0 3px rgba(36, 145, 58, .11);
}

.record-preview-shell #em-compliance-form select option,
.record-preview-shell .bulk-em-checks select option {
  color: #1d232c;
  background: #fff;
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  html:has(.record-preview-shell) {
    scrollbar-gutter: stable;
  }

  html:has(.record-preview-shell),
  body:has(.record-preview-shell) {
    height: 100%;
  }

  .record-preview-shell {
    min-height: 100dvh;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .record-preview-shell .app-header {
    position: sticky;
    z-index: 1000;
    inset: 0 0 auto;
    width: 100%;
    height: auto;
    display: block;
    flex: 0 0 auto;
    border: 0;
    border-bottom: 1px solid var(--record-line);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 5px 22px rgba(22, 44, 31, 0.06);
    backdrop-filter: blur(18px);
  }

  .record-preview-shell .topbar {
    width: min(100%, 1928px);
    max-width: none;
    min-height: 66px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 9px 24px 7px;
  }

  .record-preview-shell .brand {
    align-items: center;
    gap: 10px;
  }

  .record-preview-shell .brand-mark {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .record-preview-shell .brand h1 {
    max-width: none;
    font-size: 1rem;
  }

  .record-preview-shell .topbar .button-row {
    display: flex;
  }

  .record-preview-shell .nav {
    position: relative;
    width: min(100%, 1928px);
    max-width: none;
    min-height: 52px;
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    margin: 0 auto;
    padding: 5px 24px 8px;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .record-preview-shell .nav > button,
  .record-preview-shell .nav-menu-trigger {
    width: auto;
    min-height: 38px;
    justify-content: center;
    padding: 0 15px;
    border-radius: 9px;
    color: #506058;
    font-size: .82rem;
    text-align: center;
  }

  .record-preview-shell .nav .record-preview-nav-icon {
    display: none;
  }

  .record-preview-shell .nav-menu {
    width: auto;
  }

  .record-preview-shell .nav-menu-items {
    position: fixed;
    right: auto;
    bottom: auto;
    width: min(470px, calc(100vw - 48px));
    max-height: min(620px, calc(100dvh - 142px));
    overflow-y: auto;
  }

  .record-preview-shell .record-preview-vehicle-options {
    max-height: min(260px, calc(100dvh - 390px));
    scrollbar-width: thin;
    scrollbar-color: #aab9ae transparent;
  }

  .record-preview-shell .record-preview-vehicle-options::-webkit-scrollbar {
    width: 7px;
  }

  .record-preview-shell .record-preview-vehicle-options::-webkit-scrollbar-track {
    background: transparent;
  }

  .record-preview-shell .record-preview-vehicle-options::-webkit-scrollbar-thumb {
    border: 2px solid #fff;
    border-radius: 999px;
    background: #aab9ae;
  }

  .record-preview-shell .record-preview-sidebar-footer,
  .record-preview-shell .record-preview-sidebar-toggle {
    display: none;
  }

  body .app.record-preview-shell > .main,
  body .app.record-preview-shell.sidebar-collapsed > .main {
    width: 100%;
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    margin: 0 auto;
    padding: 22px 24px 34px;
    overflow: visible;
    box-sizing: border-box;
  }

  .record-preview-shell .loads-history-page {
    width: min(100%, 1880px);
    margin-inline: auto;
  }

  .record-preview-shell.record-preview-record-page {
    position: static;
    inset: auto;
    height: 100dvh;
    overflow: hidden;
  }

  body .app.record-preview-shell.record-preview-record-page > .main {
    height: 0;
    padding-top: 12px;
    padding-bottom: 16px;
    overflow: hidden;
  }

  body .app.record-preview-shell:has(.fields-hub) > .main,
  body .app.record-preview-shell:has(.deployments-hub) > .main {
    height: 0;
    padding: 0;
    overflow: hidden;
  }

  .record-preview-shell.record-preview-content-page:not(:has(.settings-page)),
  .record-preview-shell:has(.settings-page) {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .record-preview-shell.record-preview-content-page:not(:has(.settings-page)) .main,
  .record-preview-shell:has(.settings-page) .main {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .record-preview-shell .record-preview,
  .record-preview-shell .dashboard-page,
  .record-preview-shell .baling-design-page,
  .record-preview-shell .muck-design-page,
  .record-preview-shell .settings-page {
    margin-inline: auto;
  }

  .record-preview-shell .record-preview {
    width: min(100%, 1880px);
    max-width: 1880px;
    grid-template-columns: minmax(430px, .85fr) minmax(620px, 1.15fr);
    grid-template-rows: auto minmax(248px, .92fr) minmax(246px, 1.08fr);
    gap: 18px;
    height: 100%;
    min-height: 0;
  }

  .record-preview-shell .record-preview-activity.is-empty {
    min-height: 190px;
    align-self: start;
  }

  .record-preview-shell .record-preview-page-heading h1 {
    font-size: 1.6rem;
  }

  .record-preview-shell .record-preview-page-heading p {
    font-size: .9rem;
  }

  .record-preview-shell .record-preview-location-main {
    padding-bottom: 24px;
  }

  .record-preview-shell .record-preview-location {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .record-preview-shell .record-preview-location:has(.location-request-button) .record-preview-location-main {
    padding: 8px 16px 6px;
  }

  .record-preview-shell .record-preview-location:has(.location-request-button) .record-preview-pin {
    width: 30px;
    height: 30px;
    margin-bottom: 3px;
  }

  .record-preview-shell .record-preview-location:has(.location-request-button) .record-preview-pin svg {
    width: 18px;
    height: 18px;
  }

  .record-preview-shell .record-preview-location:has(.location-request-button) h1 {
    font-size: 1.3rem;
  }

  .record-preview-shell .record-preview-location:has(.location-request-button) .record-preview-location-main > p,
  .record-preview-shell .record-preview-location:has(.location-request-button) .record-preview-ready,
  .record-preview-shell .record-preview-location:has(.location-request-button) .record-preview-change,
  .record-preview-shell .record-preview-location:has(.location-request-button) .location-request-button {
    margin-top: 4px;
  }

  .record-preview-shell .record-preview-location:has(.location-request-button) .record-preview-ready {
    min-height: 28px;
    padding: 3px 8px;
  }

  .record-preview-shell .record-preview-location:has(.location-request-button) .record-preview-updated {
    margin-top: 2px;
  }

  .record-preview-shell .record-preview-location:has(.location-request-button) .record-preview-change button,
  .record-preview-shell .record-preview-location:has(.location-request-button) .location-request-button {
    min-height: 29px;
    font-size: .68rem;
  }

  .record-preview-shell .record-preview-action-panel {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(166px, auto) 50px auto;
    align-items: stretch;
    gap: 10px;
    padding: 14px;
    min-height: 0;
    overflow: visible;
  }

  .record-preview-shell .record-preview-vehicle {
    grid-row: auto;
    min-height: 166px;
    align-content: start;
    gap: 10px;
    padding: 11px 14px 10px;
    border: 1px solid #9bd9a5;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fdf9 100%);
  }

  .record-preview-shell .record-preview-vehicle-control {
    grid-template-columns: 108px minmax(0, 1fr);
    min-height: 116px;
    align-items: start;
    gap: 16px;
    padding: 0;
  }

  .record-preview-shell .record-preview-vehicle-control img {
    width: 104px;
    height: 88px;
    padding: 5px;
    border: 1px solid #e1e8e3;
    border-radius: 13px;
    background: #fff;
    object-fit: contain;
  }

  .record-preview-shell .record-preview-vehicle-picker {
    display: grid;
    grid-template-rows: auto auto;
    gap: 7px;
  }

  .record-preview-shell .record-preview-vehicle-trigger {
    min-height: 32px;
    grid-template-columns: minmax(0, 1fr);
    font-size: 1rem;
    pointer-events: none;
  }

  .record-preview-shell .record-preview-vehicle-trigger > span {
    display: none;
  }

  .record-preview-shell .record-preview-vehicle-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
  }

  .record-preview-shell .record-preview-vehicle-details > div {
    min-width: 0;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 2px 12px;
    border-left: 1px solid #e7ece9;
  }

  .record-preview-shell .record-preview-vehicle-details > div:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .record-preview-shell .record-preview-vehicle-details svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: #47725b;
    stroke-width: 1.7;
  }

  .record-preview-shell .record-preview-vehicle-details span,
  .record-preview-shell .record-preview-vehicle-details small,
  .record-preview-shell .record-preview-vehicle-details strong {
    min-width: 0;
    display: block;
  }

  .record-preview-shell .record-preview-vehicle-details small {
    margin-bottom: 2px;
    overflow: hidden;
    color: #6f7e76;
    font-size: .63rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .record-preview-shell .record-preview-vehicle-details strong {
    min-height: 0;
    padding: 0;
    overflow: hidden;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .record-preview-shell .record-preview-change-vehicle {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 1px;
    border: 1px solid #85d394;
    border-radius: 9px;
    color: #267b38;
    background: #fff;
    font-size: .75rem;
    font-weight: 760;
  }

  .record-preview-shell .record-preview-change-vehicle span {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
  }

  .record-preview-shell .record-preview-vehicle-options {
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    width: 100%;
  }

  .record-preview-shell .record-preview-record {
    min-height: 50px;
    height: 50px;
    align-self: stretch;
    margin: 0;
  }

  .record-preview-shell .record-preview-map-card,
  .record-preview-shell .record-preview-activity:not(.record-preview-secondary-activity) {
    min-height: 0;
  }

  .record-preview-shell .record-preview-activity:not(.record-preview-secondary-activity) .record-preview-timeline::before {
    display: none;
  }

  .record-preview-shell .record-preview-activity:not(.record-preview-secondary-activity) .record-preview-event {
    grid-template-columns: 14px 96px minmax(0, 1fr) 34px;
    min-height: 49px;
    padding: 5px 0;
  }

  .record-preview-shell .record-preview-activity:not(.record-preview-secondary-activity) .record-preview-event + .record-preview-event {
    border-top: 1px solid #edf1ee;
  }

  .record-preview-shell .record-preview-activity:not(.record-preview-secondary-activity) .record-preview-dot {
    position: static;
    width: 8px;
    height: 8px;
    justify-self: center;
    border-width: 1px;
  }

  .record-preview-shell .dashboard-page {
    width: min(100%, 1680px);
  }

  .record-preview-shell .admin-design-page {
    width: min(100%, 1560px);
  }

  .record-preview-shell .admin-design-deployments {
    width: 100%;
    height: 100%;
    max-width: none;
    grid-template-rows: auto minmax(0, 1fr);
    padding-bottom: 0;
  }

  .record-preview-shell .admin-design-deployments .admin-design-heading {
    margin: 14px 18px 0;
  }

  .record-preview-shell .admin-design-deployments .admin-design-content {
    min-height: 0;
  }

  .record-preview-shell .fields-hub,
  .record-preview-shell .deployments-hub {
    height: 100%;
  }

  .record-preview-shell .baling-design-entry {
    width: min(100%, 1040px);
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--record-line);
    border-radius: 18px;
    box-shadow: 0 16px 44px rgba(22, 44, 31, .09);
  }

  .record-preview-shell .baling-design-entry-form {
    padding: 22px;
  }

  .record-preview-shell .baling-design-step-panel[data-baling-design-step="1"].active {
    grid-template-columns: minmax(390px, 1.08fr) minmax(330px, .92fr);
    align-items: start;
    column-gap: 22px;
  }

  .record-preview-shell .baling-design-step-panel[data-baling-design-step="1"] > .baling-design-section-label,
  .record-preview-shell .baling-design-step-panel[data-baling-design-step="1"] > .field:has(textarea),
  .record-preview-shell .baling-design-step-panel[data-baling-design-step="1"] > .baling-design-primary {
    grid-column: 1 / -1;
  }

  .record-preview-shell .baling-design-step-panel[data-baling-design-step="1"] > .baling-design-location-card {
    grid-column: 1;
    grid-row: 2 / span 6;
    height: 100%;
  }

  .record-preview-shell .baling-design-step-panel[data-baling-design-step="1"] > .baling-detected-field,
  .record-preview-shell .baling-design-step-panel[data-baling-design-step="1"] > .baling-resume-notice,
  .record-preview-shell .baling-design-step-panel[data-baling-design-step="1"] > .baling-design-acres,
  .record-preview-shell .baling-design-step-panel[data-baling-design-step="1"] > .field:not(:has(textarea)) {
    grid-column: 2;
  }

  .record-preview-shell .baling-design-location-card [data-baling-gps-canvas] {
    min-height: 300px;
  }

  .record-preview-shell .baling-design-entry-form input,
  .record-preview-shell .baling-design-entry-form select,
  .record-preview-shell .baling-design-entry-form textarea,
  .record-preview-shell .baling-design-entry-form .baling-customer-combobox > input {
    border-color: #d9dfe4;
    color: #1d232c;
    background: #fff;
  }

  .record-preview-shell .baling-design-entry-form input::placeholder,
  .record-preview-shell .baling-design-entry-form textarea::placeholder {
    color: #87918c;
  }

  .record-preview-shell .baling-design-entry-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Keep the dashboard refresh above legacy dashboard rules in the cascade. */
.dashboard-page { width: min(100%, 1560px); gap: 14px; }
.app:has(.dashboard-page) > .main { background: #f7f9f8; }
.dashboard-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.dashboard-page .panel {
  border: 1px solid #e1e7e3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(25, 45, 33, .045);
}
.dashboard-page .panel::before { display: none; }
.daily-completion-panel { margin-top: 0; padding: 15px 17px; }
.daily-completion-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.daily-completion-grid > div {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  border: 0;
  border-right: 1px solid #e4e9e6;
  border-radius: 0;
  background: transparent;
}
.daily-completion-grid > div:last-child { border-right: 0; }
.daily-completion-grid > div > span { width: 36px; height: 36px; color: #2aaa48; background: #ebf8ee; }
.daily-completion-grid p { min-width: 0; display: grid; gap: 1px; margin: 0; }
.daily-completion-grid small { color: #7b8799; font-size: .7rem; }
.daily-completion-grid strong { color: #172033; font-size: .9rem; }
.daily-completion-grid em { color: #8993a3; font-size: .68rem; font-style: normal; }
.dashboard-loads-panel,
.dashboard-baling-panel { padding: 14px; background: #fff; }
.dashboard-page .table-wrap { border-color: #e0e6e2; border-radius: 10px; background: #fff; }
.dashboard-page thead { background: #f7f9f8; }
.dashboard-page th { color: #69758a; border-color: #e1e7e3; }
.dashboard-page td { border-color: #e7ebe8; color: #263146; }
.dashboard-page tbody tr:nth-child(even) { background: #fbfcfb; }
.dashboard-page tbody tr:hover { background: #f1f8f3; }
.dashboard-baling-list { gap: 0; overflow: hidden; border: 1px solid #e0e6e2; border-radius: 10px; }
.dashboard-baling-record { gap: 7px; padding: 11px 13px; border: 0; border-bottom: 1px solid #e7ebe8; border-radius: 0; background: #fff; }
.dashboard-baling-record:last-child { border-bottom: 0; }
.dashboard-baling-record:hover,
.dashboard-baling-record:focus-visible { border-color: #e7ebe8; background: #f1f8f3; }
.dashboard-baling-facts > span { padding: 4px 0; background: transparent; }

@media (max-width: 900px) {
  .dashboard-panels { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .daily-completion-panel { padding: 13px; }
  .daily-completion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-completion-grid > div { padding: 8px; border-right: 0; border-bottom: 1px solid #e4e9e6; }
  .daily-completion-grid > div:nth-last-child(-n + 2) { border-bottom: 0; }
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .dashboard-baling-record {
    min-height: 62px;
    grid-template-columns: minmax(130px, 1.35fr) minmax(44px, .48fr) minmax(44px, .48fr) minmax(68px, .8fr) 70px;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
  }

  .dashboard-baling-record-heading,
  .dashboard-baling-facts {
    display: contents;
  }

  .dashboard-baling-record-heading > span {
    grid-column: 1;
    grid-row: 1;
    gap: 2px;
  }

  .dashboard-baling-record-heading time {
    grid-column: 5;
    grid-row: 1;
    align-self: start;
    padding-top: 2px;
    font-size: .64rem;
  }

  .dashboard-baling-facts > span {
    min-width: 0;
    display: grid;
    gap: 1px;
    padding: 0;
  }

  .dashboard-baling-facts > span:nth-child(1) { grid-column: 2; grid-row: 1; }
  .dashboard-baling-facts > span:nth-child(2) { grid-column: 3; grid-row: 1; }
  .dashboard-baling-facts > span:nth-child(3) { grid-column: 4; grid-row: 1; }

  .dashboard-baling-facts strong {
    font-size: .86rem;
    white-space: nowrap;
  }

  .dashboard-baling-facts strong em {
    margin-left: 5px;
    font-size: .62rem;
    font-weight: 600;
    white-space: nowrap;
  }
}

/* Desktop Manage uses the same grouped card menu as the header Admin control. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .record-preview-shell .admin-menu-card {
    width: min(440px, calc(100vw - 32px));
    max-height: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
    padding: 12px;
    border: 1px solid var(--record-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(18, 31, 24, .2);
  }

  .record-preview-shell .admin-menu-card .nav-menu-group {
    gap: 3px;
    padding: 8px;
    border: 1px solid #e7ece8;
    border-radius: 11px;
    background: #f8faf8;
  }

  .record-preview-shell .admin-menu-card .nav-menu-group-title {
    padding: 1px 7px 4px;
  }

  .record-preview-shell .admin-menu-card .nav-menu-group button {
    min-height: 32px;
    justify-content: center;
    padding: 5px 8px;
    border: 1px solid #dfe6e1;
    border-radius: 8px;
    color: #202b3d;
    background: #fff;
    font-size: .78rem;
    font-weight: 700;
    text-align: center;
  }

  .record-preview-shell .admin-menu-card .nav-menu-group button:hover,
  .record-preview-shell .admin-menu-card .nav-menu-group button:focus-visible {
    border-color: #bcd8c2;
    color: #174d24;
    background: #eef7f0;
  }
}

/* Deployments needs a compact identity bar so the map remains the focus. */
.record-preview-shell .admin-design-deployments .admin-design-heading {
  min-height: 76px;
  gap: 11px;
  padding: 11px 16px;
  border-radius: 16px;
}

.record-preview-shell .admin-design-deployments .admin-design-heading-icon {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 12px;
}

.record-preview-shell .admin-design-deployments .admin-design-heading-icon svg {
  width: 22px;
  height: 22px;
}

.record-preview-shell .admin-design-deployments .admin-design-heading > div > span {
  margin-bottom: 0;
  font-size: .62rem;
}

.record-preview-shell .admin-design-deployments .admin-design-heading h1 {
  font-size: 1.5rem;
}

.record-preview-shell .admin-design-deployments .admin-design-heading p {
  margin-top: 2px;
  font-size: .78rem;
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .record-preview-shell .admin-design-deployments .admin-design-heading {
    margin: 8px 12px 0;
  }
}

/* Dark theme polish
   -----------------
   Keep this layer last: a number of the desktop and redesigned-page rules are
   intentionally declared late in the stylesheet and otherwise restore their
   light surfaces after the original theme block. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1410;
  --panel: #172019;
  --text: #f1f6f2;
  --muted: #a8b5ac;
  --line: #324139;
  --brand: #70cf82;
  --brand-2: #35a84e;
  --shadow: 0 16px 38px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .record-preview-shell,
html[data-theme="dark"] .record-preview-shell > .main {
  color: var(--text);
  background: #0d1410;
}

html[data-theme="dark"] .record-preview-shell {
  --bg: #0d1410;
  --panel: #172019;
  --text: #f1f6f2;
  --muted: #a8b5ac;
  --line: #324139;
  --record-green: #68d17c;
  --record-green-deep: #58c86e;
  --record-green-soft: #193823;
  --record-amber: #e2b45e;
  --record-amber-soft: #392f1c;
  --record-red: #ef8c8c;
  --record-red-soft: #3b2323;
  --record-ink: #f1f6f2;
  --record-muted: #a8b5ac;
  --record-line: #324139;
  --record-surface: #172019;
  --record-shadow: 0 16px 38px rgba(0, 0, 0, .24), 0 2px 8px rgba(0, 0, 0, .22);
}

/* App chrome */
html[data-theme="dark"] .record-preview-shell .app-header,
html[data-theme="dark"] .record-preview-shell .topbar,
html[data-theme="dark"] .record-preview-shell .nav {
  color: var(--record-ink);
  border-color: #2e3d35;
  background: rgba(13, 20, 16, .94);
}

html[data-theme="dark"] .record-preview-shell .app-header {
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
  backdrop-filter: blur(18px) saturate(120%);
}

html[data-theme="dark"] .record-preview-shell .brand h1,
html[data-theme="dark"] .record-preview-shell .topbar .record-preview-header-action {
  color: #f5f8f6;
}

html[data-theme="dark"] .record-preview-shell .topbar button {
  color: #dce6df;
  border-color: #34443a;
  background: #18211a;
}

html[data-theme="dark"] .record-preview-shell .topbar .record-preview-header-action {
  border-color: transparent;
  background: transparent;
}

html[data-theme="dark"] .record-preview-shell .topbar .record-preview-header-action:hover,
html[data-theme="dark"] .record-preview-shell .topbar .record-preview-header-action:focus-visible {
  color: #8de59e;
  background: #1b2d20;
}

html[data-theme="dark"] .record-preview-header-action.has-notifications::after {
  border-color: #0d1410;
}

html[data-theme="dark"] .record-preview-shell .nav > button,
html[data-theme="dark"] .record-preview-shell .nav-menu-trigger {
  color: #9ca9a1;
}

html[data-theme="dark"] .record-preview-shell .nav > button:hover:not(.active),
html[data-theme="dark"] .record-preview-shell .nav-menu-trigger:hover:not(.active) {
  color: #8de59e;
  background: transparent;
}

html[data-theme="dark"] .record-preview-shell .nav > button.active,
html[data-theme="dark"] .record-preview-shell .nav-menu-trigger.active {
  color: #fff;
  background: linear-gradient(135deg, #3cb65a, #299443);
  box-shadow: 0 8px 20px rgba(22, 132, 51, .25);
}

html[data-theme="dark"] .record-preview-shell :is(.admin-menu-card, .record-preview-admin-menu-items, .nav-menu-items) {
  color: var(--record-ink);
  border-color: #34443a;
  background: #151e17;
  box-shadow: 0 20px 52px rgba(0, 0, 0, .4);
}

html[data-theme="dark"] .record-preview-shell .admin-menu-card .nav-menu-group {
  border-color: #2e3d34;
  background: #111914;
}

html[data-theme="dark"] .record-preview-shell .admin-menu-card .nav-menu-group button,
html[data-theme="dark"] .record-preview-shell .nav-menu-items button {
  color: #d8e2db;
  border-color: #34443a;
  background: #19231c;
}

html[data-theme="dark"] .record-preview-shell .admin-menu-card .nav-menu-group button:hover,
html[data-theme="dark"] .record-preview-shell .admin-menu-card .nav-menu-group button:focus-visible,
html[data-theme="dark"] .record-preview-shell .nav-menu-items button:hover,
html[data-theme="dark"] .record-preview-shell .nav-menu-items button:focus-visible {
  color: #a9efb6;
  border-color: #4c7057;
  background: #203427;
}

/* Shared surfaces and controls */
html[data-theme="dark"] .record-preview-shell :is(
  .panel,
  .metric,
  .detail-box,
  .empty,
  .event-card,
  .settings-card,
  .record-preview-vehicle,
  .record-preview-activity,
  .record-preview-map-card,
  .record-preview-action-panel,
  .baling-entry-panel,
  .baling-record-panel,
  .muck-design-summary,
  .muck-design-field-group,
  .muck-design-view-all
) {
  color: var(--record-ink);
  border-color: #324139;
  background: #172019;
  box-shadow: var(--record-shadow);
}

html[data-theme="dark"] .record-preview-shell :is(h1, h2, h3, h4, strong, legend) {
  color: #f1f6f2;
}

html[data-theme="dark"] .record-preview-shell :is(p, small, .compact-caption) {
  border-color: #324139;
}

html[data-theme="dark"] .record-preview-shell :is(input, select, textarea),
html[data-theme="dark"] .record-preview-shell .field :is(input, select, textarea) {
  color: #edf4ef;
  border-color: #415148;
  background: #101713;
  -webkit-text-fill-color: #edf4ef;
}

html[data-theme="dark"] .record-preview-shell :is(input, textarea)::placeholder {
  color: #76847b;
  -webkit-text-fill-color: #76847b;
}

html[data-theme="dark"] .record-preview-shell :is(input, select, textarea):focus {
  border-color: #5fbd72;
  box-shadow: 0 0 0 3px rgba(95, 189, 114, .14);
}

html[data-theme="dark"] .record-preview-shell option {
  color: #edf4ef;
  background: #172019;
}

html[data-theme="dark"] .record-preview-shell button.ghost {
  color: #dce6df;
  border-color: #415148;
  background: #1c2720;
}

html[data-theme="dark"] .record-preview-shell button.ghost:hover:not(:disabled) {
  color: #a9efb6;
  border-color: #52705c;
  background: #23342a;
}

html[data-theme="dark"] .record-preview-shell button.ghost:disabled {
  color: #718078;
  border-color: #2c3931;
  background: #141b16;
}

html[data-theme="dark"] .record-preview-shell :is(.status, .sync-indicator).info {
  color: #a9e9b5;
  background: #1b3924;
}

html[data-theme="dark"] .record-preview-shell .status.ok { color: #a8eeb5; background: #1b3824; }
html[data-theme="dark"] .record-preview-shell .status.warn { color: #f0cf88; background: #3b321d; }
html[data-theme="dark"] .record-preview-shell .status.danger { color: #f2a2a2; background: #3d2424; }

/* Dashboard */
html[data-theme="dark"] .app:has(.dashboard-page) > .main {
  background: #0d1410;
}

html[data-theme="dark"] .dashboard-page,
html[data-theme="dark"] .dashboard-heading h1,
html[data-theme="dark"] .dashboard-summary-card strong,
html[data-theme="dark"] .dashboard-quick-actions strong,
html[data-theme="dark"] .dashboard-quick-actions i {
  color: #f1f6f2;
}

html[data-theme="dark"] .dashboard-heading p,
html[data-theme="dark"] .dashboard-live-status small,
html[data-theme="dark"] .dashboard-summary-card span:last-child,
html[data-theme="dark"] .dashboard-quick-actions small,
html[data-theme="dark"] .dashboard-section-heading span {
  color: #9eaca3;
}

html[data-theme="dark"] .dashboard-summary-card,
html[data-theme="dark"] .dashboard-page .panel,
html[data-theme="dark"] .dashboard-loads-panel,
html[data-theme="dark"] .dashboard-baling-panel,
html[data-theme="dark"] .dashboard-quick-actions > button {
  color: #edf4ef;
  border-color: #304037;
  background: linear-gradient(145deg, #19231c, #151d17);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] .dashboard-summary-card:hover,
html[data-theme="dark"] .dashboard-quick-actions > button:hover {
  border-color: #45604d;
  background: #1b2920;
}

html[data-theme="dark"] :is(.dashboard-summary-icon, .dashboard-quick-actions > button > span, .daily-completion-grid > div > span) {
  color: #77dc8b;
  background: #1b3924;
}

html[data-theme="dark"] .dashboard-summary-card small,
html[data-theme="dark"] .dashboard-section-heading h2 {
  color: #8fa99a;
}

html[data-theme="dark"] .dashboard-page :is(.table-wrap, table, thead, tbody, tr, td, th),
html[data-theme="dark"] .dashboard-baling-list,
html[data-theme="dark"] .dashboard-baling-record {
  color: #e5ece7;
  border-color: #304037;
  background: #151e18;
}

html[data-theme="dark"] .dashboard-page thead { background: #111914; }
html[data-theme="dark"] .dashboard-page th { color: #93a198; }
html[data-theme="dark"] .dashboard-page tbody tr:nth-child(even) { background: #17211a; }
html[data-theme="dark"] .dashboard-page tbody tr:hover,
html[data-theme="dark"] .dashboard-baling-record:hover,
html[data-theme="dark"] .dashboard-baling-record:focus-visible { background: #1c3023; }

/* Record */
html[data-theme="dark"] .record-preview-location {
  border-color: #355044;
  background: linear-gradient(145deg, #1b2b21, #141c17);
}

html[data-theme="dark"] .record-preview-contours {
  opacity: .78;
  background:
    repeating-radial-gradient(ellipse at 14% 30%, transparent 0 31px, rgba(112, 207, 130, .09) 32px 33px, transparent 34px 51px),
    repeating-radial-gradient(ellipse at 87% 20%, transparent 0 42px, rgba(112, 207, 130, .065) 43px 44px, transparent 45px 66px),
    linear-gradient(180deg, rgba(27, 45, 34, .78), rgba(20, 28, 23, .96));
}

html[data-theme="dark"] .record-preview-location.warning .record-preview-contours {
  background:
    repeating-radial-gradient(ellipse at 14% 30%, transparent 0 31px, rgba(226, 180, 94, .08) 32px 33px, transparent 34px 51px),
    linear-gradient(180deg, #2d281b, #1d1b16);
}

html[data-theme="dark"] .record-preview-location.blocked .record-preview-contours {
  background:
    repeating-radial-gradient(ellipse at 14% 30%, transparent 0 31px, rgba(239, 140, 140, .08) 32px 33px, transparent 34px 51px),
    linear-gradient(180deg, #2c2020, #1e1717);
}

html[data-theme="dark"] .record-preview-location h1,
html[data-theme="dark"] .record-preview-statuses strong,
html[data-theme="dark"] .record-preview-vehicle-control strong,
html[data-theme="dark"] .record-preview-vehicle-trigger {
  color: #f4f8f5;
}

html[data-theme="dark"] .record-preview-ready {
  color: #94e7a4;
  background: rgba(28, 66, 39, .86);
}

html[data-theme="dark"] .record-preview-updated { color: #94a198; }

html[data-theme="dark"] .record-preview-change button,
html[data-theme="dark"] .record-preview-location .location-request-button {
  color: #e6eee8;
  border-color: #415148;
  background: rgba(17, 25, 20, .9);
}

html[data-theme="dark"] .record-preview-statuses {
  border-color: #314239;
  background: rgba(12, 18, 14, .72);
}

html[data-theme="dark"] .record-preview-statuses > div { border-color: #33443a; }
html[data-theme="dark"] .record-preview-status-icon { border-color: #3b5042; background: #17261c; }

html[data-theme="dark"] .record-preview-vehicle-control {
  border-color: #33443a;
  background: #111914;
}

html[data-theme="dark"] .record-preview-vehicle-control img {
  background: #eef3ef;
}

html[data-theme="dark"] .record-preview-change-vehicle {
  color: #9be6aa;
  border-color: #42624b;
  background: #17271d;
}

html[data-theme="dark"] .record-preview-vehicle-options,
html[data-theme="dark"] .record-preview-sheet {
  color: #edf4ef;
  border-color: #3a4a40;
  background: #172019;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .48);
}

html[data-theme="dark"] .record-preview-vehicle-options button + button,
html[data-theme="dark"] .record-preview-event { border-color: #2f3e35; }
html[data-theme="dark"] .record-preview-empty { color: #b6c2ba; }
html[data-theme="dark"] .record-preview-secondary-actions { border-color: #304037; }
html[data-theme="dark"] .record-preview-secondary-actions button { color: #e8efea; border-color: #3c4c42; background: #1c2720; }

/* Baling */
html[data-theme="dark"] .baling-design-section-label { color: #8fa99a; }

html[data-theme="dark"] .baling-design-stats article,
html[data-theme="dark"] .baling-design-operators article {
  color: #edf4ef;
  border-color: #324139;
  background: linear-gradient(145deg, #19231c, #151d17);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .17);
}

html[data-theme="dark"] .baling-design-operators article:first-child {
  border-color: #2f5363;
  background: linear-gradient(145deg, #17242a, #151d20);
}

html[data-theme="dark"] .baling-design-operators article:last-child {
  border-color: #5b4c2d;
  background: linear-gradient(145deg, #272218, #1c1b16);
}

html[data-theme="dark"] .baling-design-search-row > label,
html[data-theme="dark"] .baling-design-search-row > button,
html[data-theme="dark"] .baling-design-recent-list,
html[data-theme="dark"] .baling-design-recent-row,
html[data-theme="dark"] .baling-design-location-card,
html[data-theme="dark"] .baling-design-details-header,
html[data-theme="dark"] .baling-detail-card,
html[data-theme="dark"] .baling-design-editor .baling-edit-panel {
  color: #edf4ef;
  border-color: #324139;
  background: #172019;
}

html[data-theme="dark"] .baling-design-search-row svg { stroke: #91a198; }

html[data-theme="dark"] .baling-design-recent-row:hover,
html[data-theme="dark"] .baling-design-recent-row:focus-visible {
  background: #1c3023;
}

html[data-theme="dark"] .baling-design-crop-mark,
html[data-theme="dark"] .baling-design-recent-row { border-color: #2e3d34; }
html[data-theme="dark"] .baling-design-recent-row .baling-design-recent-customer { color: #cad5ce; }

html[data-theme="dark"] .baling-design-filters {
  color: #e8efea;
  border-color: #385043;
  background: #142018;
}

html[data-theme="dark"] .record-preview-shell .baling-design-filters select,
html[data-theme="dark"] .baling-design-filters > button,
html[data-theme="dark"] .baling-design-entry-form :is(input, select, textarea) {
  color-scheme: dark;
  color: #edf4ef;
  border-color: #415148;
  background: #101713;
  -webkit-text-fill-color: #edf4ef;
}

html[data-theme="dark"] .record-preview-shell .baling-design-filters select option { color: #edf4ef; background: #172019; }
html[data-theme="dark"] .baling-design-entry-form .field label,
html[data-theme="dark"] .baling-design-filters label { color: #9eaca3; }
html[data-theme="dark"] .baling-design-steps > div span { background: #26322b; }
html[data-theme="dark"] .baling-design-steps i { background: linear-gradient(90deg, #5fca73, #344139); }

html[data-theme="dark"] .baling-design-editor .baling-edit-status { border-color: #5d4e2d; background: #2d281a; }
html[data-theme="dark"] .baling-design-editor .baling-edit-status.unfinished { border-color: #80662d; background: #342b19; }
html[data-theme="dark"] .baling-design-editor .baling-edit-status.finished { border-color: #365d40; background: #1b3422; }

/* Muck spreading */
html[data-theme="dark"] .muck-design-launchers > button {
  color: #edf4ef;
  border-color: #324139;
  background: linear-gradient(145deg, #19231c, #151d17);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] .muck-design-launchers > button:hover,
html[data-theme="dark"] .muck-design-launchers > button:focus-visible {
  border-color: #4b6553;
  background: #1b2920;
}

html[data-theme="dark"] .muck-design-launchers > button > span.blue {
  color: #82b8ec;
  background: #1d3042;
}

html[data-theme="dark"] .muck-design-location {
  color: #edf4ef;
  border-color: #5c4d2d;
  background: #292318;
}

html[data-theme="dark"] .muck-design-location.detected {
  border-color: #365d40;
  background: linear-gradient(135deg, #17291d, #15221a);
}

html[data-theme="dark"] .muck-design-location > button {
  color: #e4ece6;
  border-color: #415148;
  background: #111914;
}

html[data-theme="dark"] .muck-design-stats article {
  border-color: #33443a;
  background: #141d17;
}

html[data-theme="dark"] .muck-design-empty {
  border-color: #44564b;
  background: #141c17;
}

html[data-theme="dark"] .muck-design-empty > span {
  color: #aab9af;
  background: #232f27;
}

html[data-theme="dark"] .record-preview-shell .muck-design-entry-panel :is(input, select, textarea),
html[data-theme="dark"] .record-preview-shell .muck-manual-map-form :is(input, select, textarea) {
  color: #edf4ef;
  border-color: #415148;
  background: #101713;
}

html[data-theme="dark"] .record-preview-shell .muck-design-entry-panel select option,
html[data-theme="dark"] .record-preview-shell .muck-manual-map-form select option {
  color: #edf4ef;
  background: #172019;
}

/* Fields */
html[data-theme="dark"] .record-preview-shell .fields-hub :is(.fields-sidebar, .field-navigator-results) {
  color: #e7eee9;
  border-color: #314139;
  background: #141d17;
}

html[data-theme="dark"] .record-preview-shell .fields-hub :is(.field-navigator-owner-title, .field-owner-title) {
  color: #c0ccc4;
  border-color: #34443a;
  background: #1b251e;
}

html[data-theme="dark"] .record-preview-shell .fields-hub .field-navigator-owner-title:hover {
  color: #eaf1ec;
  background: #223128;
}

html[data-theme="dark"] .record-preview-shell .fields-hub .field-navigator-item {
  color: #dce6df;
  border-color: #2f3e35;
  background: #172019;
}

html[data-theme="dark"] .record-preview-shell .fields-hub .field-navigator-item:hover:not(.active) {
  background: #1e2b23;
}

html[data-theme="dark"] .record-preview-shell .fields-hub .field-navigator-item.active {
  color: #ddf6e2;
  background: #203b28;
  box-shadow: inset 3px 0 #64cb78;
}

html[data-theme="dark"] .record-preview-shell .fields-hub .field-navigator-search span {
  color: #a8edb5;
  background: #1d3b26;
}

html[data-theme="dark"] .record-preview-shell .fields-hub .field-navigator-results {
  scrollbar-color: #536259 #101713;
}

html[data-theme="dark"] .record-preview-shell .fields-hub .field-navigator-results::-webkit-scrollbar-track { background: #101713; }
html[data-theme="dark"] .record-preview-shell .fields-hub .field-navigator-results::-webkit-scrollbar-thumb { background: #536259; }

html[data-theme="dark"] .record-preview-shell .fields-hub .leaflet-tile-pane img {
  filter: brightness(.8) contrast(1.06) saturate(.8);
}

html[data-theme="dark"] .record-preview-shell .fields-hub :is(.leaflet-control-zoom a, .leaflet-control-layers) {
  color: #edf4ef;
  border-color: #415148;
  background: #19231c;
}

/* Loads and data-heavy pages */
html[data-theme="dark"] .record-preview-shell :is(.table-wrap, table, thead, tbody, tr, td, th) {
  color: #e4ece6;
  border-color: #304037;
  background-color: #151e18;
}

html[data-theme="dark"] .record-preview-shell thead,
html[data-theme="dark"] .record-preview-shell th {
  color: #aebbb3;
  background: #111914;
}

html[data-theme="dark"] .record-preview-shell .admin-events-table .load-day-divider td {
  color: #b7edc1;
  border-top-color: #4eae62;
  border-bottom-color: #35503d;
  background: #1c3023;
}

html[data-theme="dark"] .record-preview-shell .admin-events-table .load-day-divider strong {
  color: #a8edb5;
  background: #24462e;
}

html[data-theme="dark"] .record-preview-shell .admin-events-table .load-row:hover td,
html[data-theme="dark"] .record-preview-shell .admin-events-table .load-row:focus td {
  color: #f0f6f2;
  background: #1d3024;
}

html[data-theme="dark"] .record-preview-shell a,
html[data-theme="dark"] .record-preview-shell .link-button {
  color: #83d995;
}

/* EA capacity register --------------------------------------------------- */
.record-preview-shell .admin-design-eaCapacity .ea-capacity-page {
  width: 100%;
  max-width: none;
  margin: 0;
}

.ea-capacity-page { display: grid; gap: 18px; }
.ea-capacity-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.ea-capacity-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ea-capacity-summary > div { min-height: 104px; display: grid; align-content: center; gap: 7px; padding: 18px 20px; border: 1px solid var(--record-line, #dce5df); border-radius: 16px; background: var(--record-surface, #fff); box-shadow: 0 7px 22px rgba(24, 50, 31, .055); }
.ea-capacity-summary span { color: var(--record-muted, #68756d); font-size: .76rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.ea-capacity-summary strong { color: var(--record-ink, #172119); font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1; }
.ea-capacity-summary .remaining { border-color: #bfe3c8; background: linear-gradient(145deg, #f8fffa, #edf9f0); }
.ea-capacity-summary .remaining strong { color: #16833a; }

.ea-capacity-form { min-width: 0; max-width: 100%; display: grid; gap: 18px; padding: 20px; overflow: hidden; border-color: #b9dbc2; box-shadow: 0 12px 34px rgba(28, 115, 48, .09); }
.ea-capacity-form-grid { display: grid; grid-template-columns: 1.4fr 1fr repeat(3, minmax(150px, .72fr)); gap: 14px; align-items: end; }
.ea-capacity-form-grid,
.ea-capacity-sync-box,
.ea-capacity-sync-fields,
.ea-capacity-form .field { min-width: 0; max-width: 100%; }
.ea-capacity-form .field { margin: 0; }
.ea-capacity-form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100%; min-width: 0; max-width: 100%; }
.ea-capacity-form textarea { resize: vertical; }
.ea-capacity-sync-box { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(380px, .9fr); gap: 22px; align-items: end; padding: 18px; border: 1px solid #cae1d0; border-radius: 14px; background: #f5faf6; }
.ea-capacity-sync-box h3 { margin: 4px 0; font-size: 1.04rem; }
.ea-capacity-sync-box p { max-width: 720px; margin: 0; color: var(--record-muted, #68756d); font-size: .8rem; line-height: 1.5; }
.ea-capacity-sync-fields { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 12px; }
.ea-capacity-form-actions { display: flex; justify-content: flex-end; gap: 10px; }

.ea-capacity-list-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.ea-capacity-list-heading h2 { margin: 0; font-size: 1.15rem; }
.ea-capacity-list-heading p { margin: 3px 0 0; color: var(--record-muted, #68756d); font-size: .78rem; }
.ea-capacity-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 12px; }
.ea-capacity-card { min-width: 0; display: grid; gap: 10px; padding: 14px; overflow: hidden; border: 1px solid var(--record-line, #dce5df); border-radius: 15px; background: var(--record-surface, #fff); box-shadow: 0 7px 20px rgba(24, 50, 31, .05); }
.ea-capacity-card[data-action="open-ea-capacity"] { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.ea-capacity-card[data-action="open-ea-capacity"]:is(:hover, :focus-visible) { outline: 0; border-color: #8fc99d; box-shadow: 0 10px 26px rgba(24, 94, 40, .11); transform: translateY(-1px); }
.ea-capacity-card.warning { border-color: #efd497; }
.ea-capacity-card.exceeded { border-color: #e7aaa6; }
.ea-capacity-card.expired { opacity: .78; }
.ea-capacity-card > header { display: flex; align-items: start; justify-content: space-between; gap: 9px; }
.ea-capacity-card > header > div { min-width: 0; }
.ea-capacity-card > header h2 { margin: 2px 0 3px; overflow: hidden; color: var(--record-ink, #172119); font-size: .94rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.ea-capacity-card > header p { margin: 0; overflow: hidden; color: var(--record-muted, #68756d); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.ea-capacity-deployment-number { color: #16863b; font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ea-capacity-status { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: #18703a; background: #e7f6eb; font-size: .6rem; font-weight: 800; }
.ea-capacity-status.warning { color: #8a5700; background: #fff1c9; }
.ea-capacity-status.exceeded { color: #a02b24; background: #fde5e2; }
.ea-capacity-status.upcoming { color: #285f91; background: #e8f2fb; }
.ea-capacity-status.expired { color: #606a64; background: #edf0ee; }
.ea-capacity-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ea-capacity-metrics > div { min-width: 0; display: grid; gap: 2px; padding: 8px 9px; border-radius: 9px; background: #f5f8f6; }
.ea-capacity-metrics span { overflow: hidden; color: var(--record-muted, #68756d); font-size: .59rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.ea-capacity-metrics strong { overflow: hidden; color: var(--record-ink, #172119); font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.ea-capacity-metrics .remaining { background: #edf8ef; }
.ea-capacity-metrics .remaining strong { color: #17853b; }
.ea-capacity-progress { height: 6px; overflow: hidden; border-radius: 999px; background: #e6ece8; }
.ea-capacity-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2ca947, #58c76b); }
.ea-capacity-card.warning .ea-capacity-progress i { background: #e6a72a; }
.ea-capacity-card.exceeded .ea-capacity-progress i { background: #ce4a42; }
.ea-capacity-progress-caption { display: flex; justify-content: space-between; margin-top: -6px; color: var(--record-muted, #68756d); font-size: .57rem; }
.ea-capacity-sync-note { padding: 8px 9px; border: 1px solid #cfe0d4; border-radius: 9px; color: #435249; background: #f7faf8; font-size: .64rem; line-height: 1.35; }
.ea-capacity-warning { display: flex; flex-wrap: wrap; gap: 7px; }
.ea-capacity-warning span { padding: 6px 9px; border-radius: 8px; color: #8a5700; background: #fff4d5; font-size: .7rem; font-weight: 700; }
.ea-capacity-card > footer { min-width: 0; display: flex; align-items: start; justify-content: space-between; gap: 8px; padding-top: 1px; }
.ea-capacity-card > footer details { min-width: 0; flex: 1; }
.ea-capacity-card > footer summary { width: fit-content; cursor: pointer; color: #247a3d; font-size: .65rem; font-weight: 750; }
.ea-capacity-breakdown { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 14px 0; }
.ea-capacity-breakdown span { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; color: var(--record-muted, #68756d); background: #f5f8f6; font-size: .7rem; }
.ea-capacity-breakdown strong { color: var(--record-ink, #172119); font-size: .86rem; }
.ea-capacity-notes { padding: 10px 12px; border-left: 3px solid #63b778; color: var(--record-muted, #68756d); background: #f5faf6; font-size: .76rem; line-height: 1.45; }
.ea-capacity-card-actions { flex: 0 0 auto; display: flex; gap: 4px; }
.ea-capacity-card-actions .compact { min-height: 30px; padding: 4px 7px; font-size: .66rem; }
.ea-capacity-open-label { align-self: center; color: #247a3d; font-size: .65rem; font-weight: 750; }
.ea-capacity-open-label b { margin-left: 3px; font-size: .82rem; }
.ea-capacity-load-table small { display: block; color: var(--record-muted, #68756d); font-size: .66rem; }
.ea-capacity-detail-page { display: grid; gap: 12px; }
.ea-capacity-detail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ea-capacity-detail-toolbar .ea-capacity-card-actions { gap: 8px; }
.ea-capacity-detail-toolbar .ea-capacity-card-actions .compact { min-width: 78px; min-height: 40px; padding: 8px 14px; border-radius: 10px; font-size: .78rem; font-weight: 800; }
.ea-capacity-danger-action { border: 1px solid #e3aaaa; color: #ae2d2d; background: #fff8f8; cursor: pointer; }
.ea-capacity-danger-action:hover { border-color: #ce6e6e; background: #fff0f0; }
.ea-capacity-detail-card { cursor: default; gap: 16px; padding: 20px; }
.ea-capacity-detail-card > header h2 { overflow: visible; font-size: 1.3rem; white-space: normal; }
.ea-capacity-detail-card > header p { overflow: visible; font-size: .76rem; white-space: normal; }
.ea-capacity-detail-card .ea-capacity-deployment-number { font-size: .72rem; }
.ea-capacity-detail-card .ea-capacity-status { padding: 7px 11px; font-size: .7rem; }
.ea-capacity-detail-card .ea-capacity-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ea-capacity-detail-card .ea-capacity-metrics > div { padding: 13px 14px; }
.ea-capacity-detail-card .ea-capacity-metrics span { font-size: .7rem; }
.ea-capacity-detail-card .ea-capacity-metrics strong { font-size: 1.08rem; }
.ea-capacity-detail-card .ea-capacity-progress { height: 9px; }
.ea-capacity-detail-card .ea-capacity-progress-caption { margin-top: -10px; font-size: .68rem; }
.ea-capacity-detail-calculation { min-width: 0; padding-top: 4px; border-top: 1px solid var(--record-line, #dce5df); }
.ea-capacity-detail-calculation .section-title { margin-top: 10px; }

html[data-theme="dark"] .ea-capacity-summary > div,
html[data-theme="dark"] .ea-capacity-card,
html[data-theme="dark"] .ea-capacity-form { color: #edf4ef; border-color: #324139; background: #172019; box-shadow: none; }
html[data-theme="dark"] .ea-capacity-summary .remaining { border-color: #2e603c; background: linear-gradient(145deg, #18251c, #1a3020); }
html[data-theme="dark"] .ea-capacity-sync-box,
html[data-theme="dark"] .ea-capacity-sync-note { color: #c8d6cc; border-color: #344c3b; background: #121b15; }
html[data-theme="dark"] .ea-capacity-metrics > div,
html[data-theme="dark"] .ea-capacity-breakdown span { background: #111914; }
html[data-theme="dark"] .ea-capacity-metrics .remaining { background: #142619; }
html[data-theme="dark"] .ea-capacity-progress { background: #29362e; }
html[data-theme="dark"] .ea-capacity-danger-action { border-color: #754646; color: #ffabab; background: #2a1919; }

@media (max-width: 1100px) {
  .ea-capacity-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ea-capacity-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ea-capacity-deployment-field { grid-column: 1 / -1; }
  .ea-capacity-sync-box { grid-template-columns: 1fr; }
}

@media (min-width: 1101px) and (max-width: 1350px) {
  .ea-capacity-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .ea-capacity-page { gap: 14px; }
  .ea-capacity-toolbar { justify-content: space-between; }
  .ea-capacity-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ea-capacity-summary > div { min-height: 84px; padding: 14px; border-radius: 13px; }
  .ea-capacity-summary span { font-size: .64rem; }
  .ea-capacity-summary strong { font-size: 1.3rem; }
  .ea-capacity-form { padding: 15px; }
  .ea-capacity-form-grid,
  .ea-capacity-sync-fields { grid-template-columns: 1fr; }
  .ea-capacity-deployment-field { grid-column: auto; }
  .ea-capacity-sync-box { padding: 14px; }
  .ea-capacity-list { grid-template-columns: 1fr; gap: 9px; }
  .ea-capacity-card { gap: 9px; padding: 12px; border-radius: 13px; }
  .ea-capacity-card > header { gap: 10px; }
  .ea-capacity-card > header h2 { font-size: 1rem; }
  .ea-capacity-metrics,
  .ea-capacity-detail-card .ea-capacity-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .ea-capacity-metrics > div { padding: 8px; }
  .ea-capacity-card > footer { display: grid; }
  .ea-capacity-card-actions { justify-content: flex-end; grid-row: 1; }
  .ea-capacity-breakdown { grid-template-columns: 1fr; }
  .ea-capacity-detail-toolbar { align-items: center; }
  .ea-capacity-detail-toolbar .ea-capacity-card-actions .compact { min-width: 72px; min-height: 42px; padding-inline: 12px; }
  .ea-capacity-detail-card { padding: 14px; }
}

/* Manage and reporting pages inherit the same surface rhythm. */
html[data-theme="dark"] .record-preview-shell .admin-design-heading,
html[data-theme="dark"] .record-preview-shell .admin-design-content > .panel,
html[data-theme="dark"] .record-preview-shell .admin-design-content .permission-layout > .panel,
html[data-theme="dark"] .record-preview-shell .admin-design-content :is(.deployments-sidebar, .deployment-editor-dock, .detail-box, .metric, .permission-group, .recycle-bin-list article),
html[data-theme="dark"] .record-preview-shell :is(.deployments-sidebar, .deployment-editor-dock, .deployment-field-picker, .deployment-editor-form) {
  color: #edf4ef;
  border-color: #324139;
  background: #172019;
}

html[data-theme="dark"] .record-preview-shell .admin-design-content thead { background: #111914; }
html[data-theme="dark"] .record-preview-shell .admin-design-content tbody tr:hover { background: #1d3024; }

html[data-theme="dark"] .record-preview-shell :is(.vehicle-design-overview, .vehicle-design-fleet, .vehicle-design-card, .vehicle-editor-head, .vehicle-editor-section, .vehicle-editor-actions) {
  color: #edf4ef;
  border-color: #324139;
  background: #172019;
}
html[data-theme="dark"] .record-preview-shell .vehicle-design-card { background: linear-gradient(145deg, #172019, #121a14); }
html[data-theme="dark"] .record-preview-shell :is(.vehicle-design-card > header, .vehicle-design-card > footer, .vehicle-editor-head, .vehicle-editor-actions, .vehicle-editor-spreading > .vehicle-spreading-toggle) { border-color: #2d3b32; }
html[data-theme="dark"] .record-preview-shell :is(.vehicle-design-metrics article, .vehicle-design-facts > div) { border-color: #324139; }
html[data-theme="dark"] .record-preview-shell :is(.vehicle-design-metrics strong, .vehicle-design-fleet h2, .vehicle-design-card h3, .vehicle-design-facts strong, .vehicle-editor-head h2, .vehicle-editor-section-title strong, .vehicle-editor-spreading > .vehicle-spreading-toggle strong) { color: #edf4ef; }
html[data-theme="dark"] .record-preview-shell .vehicle-design-edit { color: #9ae3a8; background: #111914; }
html[data-theme="dark"] .record-preview-shell .vehicle-editor-sheet { border-color: #35453a; background: #101612; }
html[data-theme="dark"] .record-preview-shell .vehicle-editor-close { color: #c9d5cc; border-color: #3b4b41; background: #202a23; }
html[data-theme="dark"] .record-preview-shell .vehicle-editor-quantity input[readonly] { color: #91dda0; background: #1b2a20; }
html[data-theme="dark"] .record-preview-shell .vehicle-design-empty { border-color: #3a4b40; }

html[data-theme="dark"] .record-preview-shell .settings-theme-options button {
  color: #dce6df;
  border-color: #3b4b41;
  background: #141c17;
}

html[data-theme="dark"] .record-preview-shell .settings-theme-options button.active {
  color: #b9efc4;
  border-color: #61c475;
  background: #203b27;
  box-shadow: inset 0 0 0 1px #61c475;
}

html[data-theme="dark"] .record-preview-shell * {
  scrollbar-color: #526158 #101713;
}

html[data-theme="dark"] .record-preview-shell ::selection {
  color: #f7fbf8;
  background: #318f48;
}

/* On desktop the Record action card is already a container, so the vehicle
   information should read as its content rather than another card inside it. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  html[data-theme="dark"] .record-preview-shell .record-preview-action-panel {
    gap: 12px;
    padding: 16px;
    border-color: #304238;
    background: linear-gradient(145deg, #18221b, #141c17);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
  }

  html[data-theme="dark"] .record-preview-shell .record-preview-vehicle {
    min-height: 154px;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  html[data-theme="dark"] .record-preview-shell .record-preview-vehicle-label {
    padding-inline: 2px;
    color: #91a198;
  }

  html[data-theme="dark"] .record-preview-shell .record-preview-vehicle-control {
    grid-template-columns: 100px minmax(0, 1fr);
    min-height: 110px;
    gap: 18px;
    padding: 2px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  html[data-theme="dark"] .record-preview-shell .record-preview-vehicle-control img {
    width: 96px;
    height: 84px;
    padding: 5px;
    border: 1px solid #385343;
    border-radius: 14px;
    background: radial-gradient(circle at 50% 45%, #294331, #1a2b20 72%);
    box-shadow: inset 0 0 24px rgba(111, 205, 130, .06);
  }

  html[data-theme="dark"] .record-preview-shell .record-preview-vehicle-trigger {
    color: #f4f8f5;
  }

  html[data-theme="dark"] .record-preview-shell .record-preview-vehicle-details > div {
    border-left-color: #35483c;
  }

  html[data-theme="dark"] .record-preview-shell .record-preview-vehicle-details svg {
    stroke: #6fc982;
  }

  html[data-theme="dark"] .record-preview-shell .record-preview-vehicle-details small {
    color: #8f9e95;
  }

  html[data-theme="dark"] .record-preview-shell .record-preview-change-vehicle {
    color: #a9eeb6;
    border-color: #42634c;
    background: #17271d;
  }

  html[data-theme="dark"] .record-preview-shell .record-preview-change-vehicle:hover,
  html[data-theme="dark"] .record-preview-shell .record-preview-change-vehicle:focus-visible {
    color: #dff7e4;
    border-color: #5e8a69;
    background: #203827;
  }

  html[data-theme="dark"] .record-preview-shell .record-preview-record:not(:disabled) {
    background: linear-gradient(135deg, #2da94b, #45bd60);
    box-shadow: 0 8px 20px rgba(29, 135, 55, .2);
  }

  html[data-theme="dark"] .record-preview-shell .record-preview-action-panel:has(.record-preview-block-reason) {
    grid-template-rows: minmax(124px, 1fr) 46px auto;
    gap: 6px;
    padding-block: 12px;
  }

  html[data-theme="dark"] .record-preview-shell .record-preview-action-panel:has(.record-preview-block-reason) .record-preview-vehicle {
    min-height: 124px;
  }

  html[data-theme="dark"] .record-preview-shell .record-preview-action-panel:has(.record-preview-block-reason) .record-preview-vehicle-control {
    min-height: 86px;
  }

  html[data-theme="dark"] .record-preview-shell .record-preview-action-panel:has(.record-preview-block-reason) .record-preview-vehicle-control img {
    width: 80px;
    height: 68px;
  }

  html[data-theme="dark"] .record-preview-shell .record-preview-action-panel:has(.record-preview-block-reason) .record-preview-block-reason {
    margin: 0 4px;
    font-size: .68rem;
    line-height: 1.2;
  }
}
.design-data-banner {
  position: sticky;
  top: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 16px;
  color: #fff;
  background: #7c3aed;
  box-shadow: 0 2px 10px rgba(60, 26, 118, .22);
  font-size: 12px;
}

.design-data-banner strong { text-transform: uppercase; letter-spacing: .08em; }
.design-data-banner span { opacity: .92; }

.weighbridge-development-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0;
}

.weighbridge-development-note span { color: var(--muted); }

.weighbridge-submissions {
  display: grid;
  gap: 12px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.weighbridge-submission-list { display: grid; gap: 10px; }

.weighbridge-submission-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 7px 22px rgba(18, 35, 26, .05);
}

.weighbridge-submission-card.submitted { border-color: color-mix(in srgb, var(--ok) 42%, var(--line)); }
.weighbridge-submission-card > header,
.weighbridge-submission-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
}

.weighbridge-submission-card > header h4 { margin: 7px 0 2px; font-size: 17px; }
.weighbridge-submission-card > header p,
.weighbridge-submission-card > footer small { margin: 0; color: var(--muted); }
.weighbridge-submission-card > footer { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 92%, var(--soft)); }
.weighbridge-submission-audit { display: grid; gap: 5px; }
.weighbridge-reopen-reason { margin: 0; color: var(--muted); font-size: 13px; }
.weighbridge-submission-totals { display: grid; justify-items: end; }
.weighbridge-submission-totals strong { font-size: 18px; }
.weighbridge-submission-totals span { color: var(--muted); font-size: 13px; }
.submitted-load { background: color-mix(in srgb, var(--ok) 5%, transparent); }

/* Development archive and DEFRA dry-run additions reuse the existing Loads,
   report-card and settings language. The sync-status column remains unchanged. */
.loads-operational-filters {
  display: grid;
  grid-template-columns: minmax(180px, 1.15fr) minmax(150px, .8fr) minmax(220px, 1.5fr) minmax(132px, .65fr) minmax(132px, .65fr) minmax(150px, .8fr);
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ok) 4%, var(--panel));
}
.loads-operational-filters label { min-width: 0; display: grid; gap: 4px; color: var(--muted); font-size: .7rem; font-weight: 800; }
.loads-operational-filters :is(input, select) { width: 100%; min-width: 0; min-height: 40px; padding: 7px 34px 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background-color: var(--panel); font: inherit; font-size: .78rem; font-weight: 700; }
.loads-operational-filters input { padding-right: 10px; }
.defra-loads-summary { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: -2px 0 10px; color: var(--muted); font-size: .74rem; font-weight: 700; }
.defra-loads-summary button { min-height: 0; padding: 2px 3px; border: 0; color: var(--text); background: transparent; font: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent); text-underline-offset: 3px; }
.defra-loads-summary button:hover { color: var(--ok); }
.defra-loads-summary small { margin-left: auto; }
.test-mode-badge { display: inline-flex; align-items: center; padding: 2px 6px; border: 1px solid color-mix(in srgb, var(--info) 35%, var(--line)); border-radius: 999px; color: var(--info); background: color-mix(in srgb, var(--info) 7%, var(--panel)); font-size: .62rem; font-weight: 850; line-height: 1.4; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.defra-load-state { display: flex; align-items: center; gap: 4px; width: fit-content; max-width: 100%; margin-top: 4px; color: var(--muted); font-size: .63rem; font-weight: 800; line-height: 1.2; }
.defra-load-state > span { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: currentColor; }
.defra-load-state.ok { color: var(--ok); }
.defra-load-state.warn { color: var(--warn); }
.defra-load-state.danger { color: var(--danger); }
.defra-load-state.info { color: var(--info); }
.defra-bulk-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--info) 26%, var(--line)); border-radius: 8px; background: color-mix(in srgb, var(--info) 5%, var(--panel)); }
.defra-bulk-actions > span { margin-right: auto; color: var(--muted); font-size: .7rem; }
.defra-bulk-actions > span b { color: var(--text); }
.loads-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; color: var(--muted); font-size: .75rem; font-weight: 750; }
.loads-pagination button { min-width: 86px; }
.weighbridge-defra-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: -2px 14px 10px; padding: 7px 9px; border-radius: 8px; color: var(--muted); background: color-mix(in srgb, var(--info) 5%, var(--panel)); font-size: .7rem; }
.weighbridge-version { display: block; margin-top: 3px; color: var(--muted); font-size: .68rem; }
.defra-history-panel { display: grid; gap: 10px; margin: 12px 0; padding: 12px; border: 1px solid color-mix(in srgb, var(--info) 30%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--info) 4%, var(--panel)); }
.defra-history-panel .section-title { margin: 0; }
.defra-history-panel .section-title h3 { margin: 1px 0; }
.settings-defra-card .settings-card-heading h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.defra-detail-card { border-color: color-mix(in srgb, var(--info) 32%, var(--line)); background: color-mix(in srgb, var(--info) 4%, var(--panel)); }
.defra-detail-card .section-title { margin-bottom: 10px; }

@media (max-width: 1100px) {
  .loads-operational-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .loads-search-field { grid-column: span 2; }
}

@media (max-width: 680px) {
  .loads-history-page > .section-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }
  .loads-history-page > .section-title > h2,
  .loads-history-page > .section-title > div:first-child {
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
  }
  .loads-history-page > .section-title .compact-actions { display: contents; }
  .loads-history-page > .section-title .compact-actions > .status {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .loads-history-page > .section-title .compact-actions > button {
    width: 100%;
    min-width: 0;
    grid-row: 2;
    padding-inline: 8px;
    white-space: normal;
  }
  .loads-history-page > .section-title .compact-actions > button:first-of-type { grid-column: 1; }
  .loads-history-page > .section-title .compact-actions > button:nth-of-type(2) { grid-column: 2; }
  .loads-history-page > .section-title .compact-actions > button:only-of-type { grid-column: 1 / -1; }
  .loads-operational-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 9px; }
  .loads-operational-filters > label:first-child,
  .loads-search-field { grid-column: 1 / -1; }
  .defra-loads-summary { gap: 4px; }
  .defra-loads-summary small { width: 100%; margin-left: 0; }
  .defra-bulk-actions > span { width: 100%; margin-right: 0; }
  .defra-bulk-actions button { flex: 1 1 calc(50% - 6px); }
  .loads-pagination { justify-content: space-between; }
  .weighbridge-defra-summary { margin-inline: 10px; }
  .defra-history-panel .section-title { align-items: stretch; flex-direction: column; }
  .defra-history-panel .section-title .compact-actions { width: 100%; }
  .defra-history-panel .section-title button { flex: 1; }
}

.weighbridge-submissions-page .weighbridge-submissions {
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
}

.weighbridge-reopened-history {
  margin-top: 6px;
  padding: 0 14px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 94%, var(--soft));
}

.weighbridge-reopened-history > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  cursor: pointer;
  color: var(--text);
  font-weight: 800;
}

.weighbridge-reopened-history > summary strong {
  min-width: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--text) 78%, var(--warn));
  background: color-mix(in srgb, var(--warn) 16%, var(--panel));
  text-align: center;
}

.weighbridge-reopened-history > p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }

.weighbridge-draft-page { display: grid; gap: 18px; }

.weighbridge-draft-heading {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}

.weighbridge-draft-heading h2 { margin: 2px 0; }
.weighbridge-draft-heading p,
.weighbridge-draft-heading > div > span { margin: 0; color: var(--muted); }

.weighbridge-draft-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.weighbridge-draft-summary > div {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--panel) 92%, var(--soft));
}

.weighbridge-draft-summary small { color: var(--muted); }
.weighbridge-draft-summary strong { font-size: 18px; }
.weighbridge-draft-page > .notice,
.weighbridge-draft-editor > .notice { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.weighbridge-draft-page > .notice span,
.weighbridge-draft-editor > .notice span { color: var(--muted); }
.weighbridge-draft-page > .notice.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 9%, var(--panel)); }
.weighbridge-draft-page > .notice.info,
.weighbridge-draft-editor > .notice.info { border-color: color-mix(in srgb, var(--info) 38%, var(--line)); background: color-mix(in srgb, var(--info) 6%, var(--panel)); }
.weighbridge-draft-toolbar { display: flex; flex-wrap: wrap; gap: 9px; }
.weighbridge-draft-toolbar button { flex: 1 1 180px; }
.weighbridge-draft-loads {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
}

.weighbridge-draft-day {
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: color-mix(in srgb, var(--soft) 70%, var(--panel));
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.weighbridge-draft-load {
  display: grid;
  grid-template-columns: 82px minmax(210px, 1fr) minmax(290px, auto);
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 7px 12px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.weighbridge-draft-reference,
.weighbridge-draft-load-main,
.weighbridge-draft-weight { display: grid; gap: 2px; }
.weighbridge-draft-reference span,
.weighbridge-draft-load-main span,
.weighbridge-draft-load-main small,
.weighbridge-draft-weight span { color: var(--muted); }
.weighbridge-draft-load-main strong,
.weighbridge-draft-load-main span,
.weighbridge-draft-load-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weighbridge-draft-load-trailing { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.weighbridge-draft-weight { justify-items: end; text-align: right; }
.weighbridge-draft-load-actions { display: flex; gap: 6px; }
.weighbridge-draft-load-actions button { min-height: 32px; padding: 5px 10px; }

.weighbridge-draft-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: grid;
  place-items: center;
  padding: 14px;
  background: rgba(10, 24, 17, .56);
  backdrop-filter: blur(4px);
}

.weighbridge-draft-editor {
  width: min(680px, 100%);
  max-height: min(88dvh, 720px);
  overflow: auto;
  padding: 18px;
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(9, 24, 16, .25);
}

.weighbridge-draft-editor > header,
.weighbridge-draft-editor > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.weighbridge-draft-editor > header { align-items: flex-start; margin-bottom: 14px; }
.weighbridge-draft-editor > header span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.weighbridge-draft-editor > header h3 { margin: 2px 0 3px; font-size: 21px; }
.weighbridge-draft-editor > header p { margin: 0; color: var(--muted); font-size: 12px; }
.weighbridge-draft-editor-close { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: var(--soft); font-size: 22px; line-height: 1; }
.weighbridge-draft-editor > footer { position: sticky; bottom: -18px; justify-content: flex-end; margin: 15px -18px -18px; padding: 12px 18px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 96%, transparent); backdrop-filter: blur(8px); }
.weighbridge-draft-editor > footer button { min-height: 42px; }
.weighbridge-draft-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.weighbridge-draft-editor-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 750; }
.weighbridge-draft-editor-grid .wide { grid-column: 1 / -1; }
.weighbridge-draft-editor-grid input,
.weighbridge-draft-editor-grid select,
.weighbridge-draft-editor-grid textarea { width: 100%; min-height: 42px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--panel); box-shadow: none; font: inherit; font-size: 14px; font-weight: 650; }
.weighbridge-draft-editor-grid input:focus,
.weighbridge-draft-editor-grid select:focus { border-color: var(--ok); outline: 3px solid color-mix(in srgb, var(--ok) 12%, transparent); }
.weighbridge-weight-input { display: grid; grid-template-columns: 1fr auto; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.weighbridge-weight-input input { min-width: 0; border: 0; background: transparent; }
.weighbridge-weight-input input:focus { outline: 0; }
.weighbridge-weight-input strong { padding: 0 12px; color: var(--muted); font-size: 12px; }

.submitted-load-register {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.submitted-load-search {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.submitted-load-search input {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: var(--panel);
  font: inherit;
  font-weight: 500;
}

.submitted-load-search input:focus {
  border-color: var(--ok);
  outline: 3px solid color-mix(in srgb, var(--ok) 14%, transparent);
}

@media (max-width: 620px) {
  .design-data-banner { position: relative; flex-wrap: wrap; gap: 2px 8px; text-align: center; }
  .weighbridge-development-note { align-items: flex-start; flex-direction: column; }
  .weighbridge-submission-card > header,
  .weighbridge-submission-card > footer { align-items: stretch; flex-direction: column; }
  .weighbridge-submission-totals { justify-items: start; grid-template-columns: auto auto; align-items: baseline; gap: 8px; }
  .weighbridge-submission-card > footer .compact-actions { width: 100%; }
  .weighbridge-submission-card > footer .compact-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weighbridge-submission-card > footer .compact-actions button { width: 100%; min-width: 0; }
  .weighbridge-submission-card.draft > footer .compact-actions .secondary:last-child { grid-column: 1 / -1; }
  .weighbridge-submissions-page > .section-title { align-items: stretch; flex-direction: column; }
  .weighbridge-submissions-page > .section-title > button { width: 100%; }
  .submitted-load-register .section-title .status { white-space: nowrap; }
  .weighbridge-draft-heading { grid-template-columns: 1fr auto; align-items: start; }
  .weighbridge-draft-heading > button { grid-column: 1 / -1; justify-self: start; }
  .weighbridge-draft-summary { grid-template-columns: 1fr 1fr; }
  .weighbridge-draft-summary > div:first-child { grid-column: 1 / -1; }
  .weighbridge-draft-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .weighbridge-draft-toolbar button { width: 100%; min-width: 0; }
  .weighbridge-draft-toolbar .secondary:last-child { grid-column: 1 / -1; }
  .weighbridge-draft-load { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 8px; min-height: 72px; padding: 7px 9px; }
  .weighbridge-draft-day { padding: 7px 9px; font-size: 11px; }
  .weighbridge-draft-reference strong { font-size: 14px; }
  .weighbridge-draft-reference span,
  .weighbridge-draft-load-main span,
  .weighbridge-draft-load-main small,
  .weighbridge-draft-weight span { font-size: 11px; }
  .weighbridge-draft-load-main strong { font-size: 14px; }
  .weighbridge-draft-load-trailing { display: grid; justify-items: end; gap: 4px; }
  .weighbridge-draft-weight { justify-items: end; text-align: right; }
  .weighbridge-draft-weight strong { font-size: 13px; white-space: nowrap; }
  .weighbridge-draft-load-actions { gap: 3px; }
  .weighbridge-draft-load-actions button { min-height: 27px; padding: 3px 6px; font-size: 11px; }
  .weighbridge-draft-editor-modal { align-items: center; padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
  .weighbridge-draft-editor { width: 100%; max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 14px; border-radius: 16px; }
  .weighbridge-draft-editor > header { margin-bottom: 11px; }
  .weighbridge-draft-editor > header h3 { font-size: 19px; }
  .weighbridge-draft-editor-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .weighbridge-draft-editor-grid label:not(.date-field):not(.time-field) { grid-column: 1 / -1; }
  .weighbridge-draft-editor-grid .wide { grid-column: 1 / -1; }
  .weighbridge-draft-editor-grid input,
  .weighbridge-draft-editor-grid select { min-height: 40px; padding: 7px 10px; font-size: 14px; }
  .weighbridge-draft-editor > footer { display: grid; grid-template-columns: 1fr 1fr; bottom: -14px; margin: 12px -14px -14px; padding: 10px 14px max(10px, env(safe-area-inset-bottom)); }
}

.rtk-connections{padding:20px;min-width:0}.rtk-connections>header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}.rtk-connections h2{margin:0 0 5px}.rtk-connections p{line-height:1.5}.rtk-connection-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0}.rtk-connection-metrics>div{padding:14px;background:#f1f6f3;border-radius:10px;display:grid;gap:6px;color:#163b2b}.rtk-connection-metrics strong{font-size:24px}.rtk-connection-metrics span,.rtk-connection-note{font-size:12px;color:#506257}.rtk-connection-alert{padding:12px;background:#fff0d5;color:#744606;border-radius:8px}.rtk-connection-tools{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:18px 0}.rtk-connection-tools label{display:grid;gap:6px;font-size:12px;font-weight:600}.rtk-connection-tools form{display:flex;align-items:end;gap:8px;flex:1}.rtk-connection-tools form label{flex:1}.rtk-connection-tools input,.rtk-connection-tools select{min-height:40px;max-width:100%;padding:8px;border:1px solid #bdcdc3;border-radius:7px}.rtk-connection-table{overflow:auto;max-height:560px;border:1px solid #dce5df;border-radius:8px}.rtk-connection-table table{border-collapse:collapse;width:100%;min-width:860px;text-align:left;font-size:12px}.rtk-connection-table th{position:sticky;top:0;background:#edf3ef;z-index:1}.rtk-connection-table th,.rtk-connection-table td{padding:12px;border-bottom:1px solid #e4ebe6;vertical-align:top}.rtk-connection-table td{max-width:270px;overflow-wrap:anywhere}.rtk-connection-table small{display:block;color:#596a60;margin-top:5px}.rtk-connection-open{background:#f5fbf6}.rtk-connection-ip-list{display:flex;gap:8px;flex-wrap:wrap}.rtk-connection-ip-list>span{background:#f1f6f3;border-radius:6px;padding:9px;font-size:12px}.rtk-connection-ip-list strong{margin-right:5px}@media(max-width:650px){.rtk-connections{padding:14px}.rtk-connection-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.rtk-connection-tools form{flex-basis:100%}.rtk-connection-tools input{width:100%}}

html[data-theme="dark"] .rtk-connections .rtk-connection-metrics>div,html[data-theme="dark"] .rtk-connections .rtk-connection-ip-list>span{background:#21382a;color:#e3f1e7}html[data-theme="dark"] .rtk-connections .rtk-connection-metrics strong,html[data-theme="dark"] .rtk-connections .rtk-connection-ip-list strong{color:#e3f1e7}html[data-theme="dark"] .rtk-connections .rtk-connection-note,html[data-theme="dark"] .rtk-connections .rtk-connection-metrics span,html[data-theme="dark"] .rtk-connections .rtk-connection-table small{color:#b6c8bc}html[data-theme="dark"] .rtk-connections .rtk-connection-tools input,html[data-theme="dark"] .rtk-connections .rtk-connection-tools select{background:#15251b;color:#e3f1e7;border-color:#496652}html[data-theme="dark"] .rtk-connections .rtk-connection-tools input::placeholder{color:#afc3b5}html[data-theme="dark"] .rtk-connections .rtk-connection-alert{background:#44371c;color:#f6dfaa}

html[data-theme="dark"] .rtk-connections .rtk-connection-tools input{background:#15251b!important;color:#e3f1e7!important;-webkit-text-fill-color:#e3f1e7!important;box-shadow:none!important}html[data-theme="dark"] .rtk-connections .rtk-connection-tools input::placeholder{color:#afc3b5!important;-webkit-text-fill-color:#afc3b5!important}

/* Imported DEFRA-only styles. */
.test-mode-badge { display: inline-flex; align-items: center; padding: 2px 6px; border: 1px solid color-mix(in srgb, var(--info) 35%, var(--line)); border-radius: 999px; color: var(--info); background: color-mix(in srgb, var(--info) 7%, var(--panel)); font-size: .62rem; font-weight: 850; line-height: 1.4; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.defra-load-state { display: flex; align-items: center; gap: 4px; width: fit-content; max-width: 100%; margin-top: 4px; color: var(--muted); font-size: .63rem; font-weight: 800; line-height: 1.2; }
.defra-load-state > span { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: currentColor; }
.defra-load-state.is-ok { color: var(--ok); }
.defra-load-state.is-warn { color: var(--warn); }
.defra-load-state.is-danger { color: var(--danger); }
.defra-load-state.is-info { color: var(--info); }
.defra-bulk-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--info) 26%, var(--line)); border-radius: 8px; background: color-mix(in srgb, var(--info) 5%, var(--panel)); }
.defra-bulk-actions > span { margin-right: auto; color: var(--muted); font-size: .7rem; }
.defra-bulk-actions > span b { color: var(--text); }
.defra-process-guide { display: grid; gap: 10px; margin: 12px 0; padding: 12px; border: 1px solid color-mix(in srgb, var(--info) 28%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--info) 4%, var(--panel)); }
.defra-process-guide-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.defra-process-guide-heading > div { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.defra-process-guide-heading > div > span { color: var(--info); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; }
.defra-process-guide-heading p { margin: 0; color: var(--muted); font-size: .72rem; }
.defra-process-guide ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.defra-process-guide li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.defra-process-guide li > b { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 23px; border-radius: 50%; color: var(--panel); background: var(--info); font-size: .7rem; }
.defra-process-guide li > span { min-width: 0; display: grid; gap: 2px; }
.defra-process-guide li strong { font-size: .74rem; }
.defra-process-guide li small { color: var(--muted); font-size: .66rem; line-height: 1.35; }
.defra-action-queue { display: grid; gap: 10px; margin: 12px 0; padding: clamp(12px, 2vw, 18px); border: 1px solid color-mix(in srgb, var(--warn) 28%, var(--line)); border-radius: 12px; background: var(--panel); }
.defra-action-queue > .section-title { margin: 0; }
.defra-action-queue > .section-title h3 { margin: 0 0 2px; }
.defra-action-queue .compact-notice { display: grid; gap: 2px; margin: 0; }
.defra-action-table th:nth-child(1) { width: 14%; }
.defra-action-table th:nth-child(2) { width: 14%; }
.defra-action-table th:nth-child(3) { width: 24%; }
.defra-action-table td { vertical-align: middle; }
.defra-day-batch { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel) 96%, var(--info)); }
.defra-day-batch + .defra-day-batch { margin-top: 2px; }
.defra-day-batch.has-attention { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.defra-day-batch > summary { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 11px 12px; cursor: pointer; list-style: none; }
.defra-day-batch > summary::-webkit-details-marker { display: none; }
.defra-day-batch > summary::after { content: "›"; order: 3; flex: 0 0 auto; color: var(--muted); font-size: 1.25rem; line-height: 1; transform: rotate(90deg); transition: transform .16s ease; }
.defra-day-batch[open] > summary::after { transform: rotate(270deg); }
.defra-day-batch > summary > div { display: grid; min-width: 0; flex: 1 1 auto; gap: 2px; }
.defra-day-batch > summary > .status { flex: 0 0 auto; margin-left: auto; }
.defra-day-batch > summary > div > span { overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.defra-day-batch-body { border-top: 1px solid var(--line); }
.defra-day-batch-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; background: color-mix(in srgb, var(--panel) 94%, var(--info)); }
.defra-day-batch-actions > span { color: var(--muted); font-size: .72rem; }
.defra-history-panel { display: grid; gap: 10px; margin: 12px 0; padding: 12px; border: 1px solid color-mix(in srgb, var(--info) 30%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--info) 4%, var(--panel)); }
.defra-history-panel .section-title { margin: 0; }
.defra-history-panel .section-title h3 { margin: 1px 0; }
.defra-beta-panel { display: grid; gap: 12px; margin: 12px 0; padding: clamp(14px, 2vw, 20px); border: 1px solid color-mix(in srgb, var(--info) 36%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--info) 3%, var(--panel)); }
.defra-beta-panel > .section-title { margin: 0; }
.defra-beta-panel > .section-title h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 2px 0; }
.defra-beta-submission-history { display: grid; gap: 9px; padding-top: 12px; border-top: 1px solid var(--line); }
.defra-beta-submission-history > .section-title { margin: 0; }
.defra-beta-submission-history > .section-title h4 { margin: 0 0 2px; }
.defra-beta-history-table th:nth-child(1) { width: 18%; }
.defra-beta-history-table th:nth-child(2) { width: 17%; }
.defra-beta-history-table th:nth-child(3) { width: 15%; }
.defra-beta-history-table td { vertical-align: top; }
.defra-waste-tracking-id,
.defra-beta-response-error { overflow-wrap: anywhere; font-size: .72rem; }
.defra-state-reference { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.defra-state-reference .defra-waste-tracking-id { color: var(--text); }
.defra-beta-response-error { color: var(--danger); font-weight: 700; }
.defra-privacy-notice { display: grid; gap: 3px; margin: 0; }
.defra-beta-profile,
.defra-beta-scenarios { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.defra-beta-profile > summary,
.defra-beta-scenarios > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 9px 12px; cursor: pointer; font-weight: 800; list-style-position: inside; }
.defra-beta-profile > summary small,
.defra-beta-scenarios > summary small { color: var(--muted); font-size: .7rem; font-weight: 600; text-align: right; }
.defra-beta-scenarios > summary em { margin-left: 5px; padding: 2px 5px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .58rem; font-style: normal; text-transform: uppercase; letter-spacing: .035em; }
.defra-beta-profile > .form { padding: 2px 12px 12px; border-top: 1px solid var(--line); }
.defra-beta-profile .grid { margin-top: 10px; }
.defra-beta-prepare { display: grid; gap: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.defra-beta-prepare > button { justify-self: start; }
.defra-beta-prepare .field small { display: block; margin-top: 4px; color: var(--muted); font-size: .68rem; }
.defra-selected-load { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border: 1px solid color-mix(in srgb, var(--info) 28%, var(--line)); border-radius: 9px; background: color-mix(in srgb, var(--info) 4%, var(--panel)); }
.defra-selected-load > div { min-width: 0; display: grid; gap: 2px; }
.defra-selected-load > div > strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.defra-selected-load > div > small { color: var(--muted); font-size: .68rem; }
.defra-selected-load > .defra-state-reference { flex: 0 0 auto; justify-content: flex-end; }
.defra-retest-warning { display: grid; gap: 2px; margin: 0; }
.defra-field-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 9px; }
.defra-field-choices legend { padding: 0 5px; color: var(--muted); font-size: .7rem; font-weight: 800; }
.defra-field-choices label,
.defra-ordinary-confirm,
.defra-review-confirm { min-width: 0; display: flex; align-items: flex-start; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--info) 3%, var(--panel)); cursor: pointer; }
.defra-field-choices input,
.defra-ordinary-confirm input,
.defra-review-confirm input { width: 17px; height: 17px; flex: 0 0 17px; margin: 1px 0 0; accent-color: var(--ok); }
.defra-field-choices span,
.defra-ordinary-confirm span,
.defra-review-confirm span { min-width: 0; display: grid; gap: 2px; }
.defra-field-choices strong,
.defra-ordinary-confirm strong,
.defra-review-confirm strong { font-size: .76rem; }
.defra-field-choices small,
.defra-ordinary-confirm small,
.defra-review-confirm small { color: var(--muted); font-size: .66rem; line-height: 1.35; }
.defra-ordinary-confirm { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); background: color-mix(in srgb, var(--warn) 5%, var(--panel)); }
.defra-required-note { padding: 9px 10px; border-left: 3px solid var(--info); color: var(--muted); background: color-mix(in srgb, var(--info) 5%, var(--panel)); font-size: .72rem; line-height: 1.45; }
.defra-required-note strong { color: var(--text); }
.defra-beta-preview { display: grid; gap: 11px; padding: 12px; border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--line)); border-radius: 10px; background: var(--panel); }
.defra-beta-preview.is-blocked { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.defra-beta-preview .section-title { margin: 0; }
.defra-beta-preview .notice { margin: 0; }
.defra-beta-preview .notice ul { margin: 6px 0 0; padding-left: 18px; }
.defra-disclosure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.defra-disclosure-grid > div { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--ok) 3%, var(--panel)); }
.defra-disclosure-grid > div:last-child { background: color-mix(in srgb, var(--muted) 4%, var(--panel)); }
.defra-disclosure-grid strong { font-size: .75rem; }
.defra-disclosure-grid ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: .68rem; line-height: 1.5; }
.defra-payload-preview { max-height: 420px; margin: 0; padding: 12px; overflow: auto; border: 1px solid #26372c; border-radius: 8px; color: #e9f6ec; background: #122018; font: 600 .68rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.defra-beta-scenarios .table-wrap { margin: 0 10px 10px; }
.defra-scenario-explanation { display: grid; gap: 2px; margin: 0 10px 10px; padding: 9px 10px; border-left: 3px solid var(--info); color: var(--muted); background: color-mix(in srgb, var(--info) 5%, var(--panel)); font-size: .7rem; line-height: 1.4; }
.defra-scenario-explanation strong { color: var(--text); }
.defra-beta-scenarios td:first-child { min-width: 180px; }
.defra-beta-scenarios td:first-child strong { display: inline-block; min-width: 34px; }
.defra-beta-scenarios .test-mode-badge { margin-top: 4px; }
.defra-beta-scenarios > p { margin: 0 12px 12px; }
.settings-defra-card .settings-card-heading h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.defra-detail-card { border-color: color-mix(in srgb, var(--info) 32%, var(--line)); background: color-mix(in srgb, var(--info) 4%, var(--panel)); }
.defra-detail-card .section-title { margin-bottom: 10px; }
@media (max-width: 680px) {
.defra-bulk-actions > span { width: 100%; margin-right: 0; }
.defra-bulk-actions button { flex: 1 1 calc(50% - 6px); }
.defra-process-guide-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
.defra-process-guide ol { grid-template-columns: 1fr; }
.defra-action-queue { padding: 10px; }
.defra-day-batch > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 10px; }
.defra-day-batch > summary > div { grid-column: 1; grid-row: 1; }
.defra-day-batch > summary > .status { grid-column: 1; grid-row: 2; justify-self: start; margin: 3px 0 0; }
.defra-day-batch > summary > div > span { overflow: visible; text-overflow: clip; white-space: normal; }
.defra-day-batch > summary::after { grid-column: 2; grid-row: 1 / span 2; }
.defra-day-batch-actions { align-items: stretch; flex-direction: column; }
.defra-day-batch-actions button { width: 100%; }
.defra-day-batch-body > .table-wrap { overflow-x: hidden; border: 0; border-radius: 0; }
.defra-action-table { display: block; min-width: 0; background: transparent; }
.defra-action-table thead { display: none; }
.defra-action-table tbody { display: block; }
.defra-action-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 10px; border-bottom: 1px solid var(--line); background: var(--panel); }
.defra-action-table tr:last-child { border-bottom: 0; }
.defra-action-table td { display: block; min-width: 0; padding: 0; border: 0; }
.defra-action-table td:nth-child(2) { grid-column: 1; grid-row: 1; }
.defra-action-table td:nth-child(4) { grid-column: 2; grid-row: 1; }
.defra-action-table td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
.defra-action-table td:nth-child(1) { grid-column: 1; grid-row: 3; align-self: center; }
.defra-action-table td:nth-child(5) { grid-column: 2; grid-row: 3; }
.defra-action-table td:nth-child(5) button { min-height: 34px; }
.defra-action-table .defra-state-reference { justify-content: flex-end; text-align: right; }
.defra-history-panel .section-title { align-items: stretch; flex-direction: column; }
.defra-history-panel .section-title .compact-actions { width: 100%; }
.defra-history-panel .section-title button { flex: 1; }
.defra-beta-panel { padding: 11px; }
.defra-selected-load { align-items: flex-start; flex-direction: column; }
.defra-selected-load > div > strong { white-space: normal; }
.defra-selected-load > .defra-state-reference { justify-content: flex-start; }
.defra-beta-profile > summary,
.defra-beta-scenarios > summary { align-items: flex-start; flex-direction: column; gap: 2px; }
.defra-beta-profile > summary small,
.defra-beta-scenarios > summary small { text-align: left; }
.defra-field-choices,
.defra-disclosure-grid { grid-template-columns: 1fr; }
.defra-beta-prepare > button,
.defra-beta-preview .button-row,
.defra-beta-preview .button-row button { width: 100%; }
.defra-beta-submission-history > .section-title { align-items: flex-start; flex-direction: column; }
.defra-beta-submission-history > .table-wrap { overflow-x: hidden; }
.defra-beta-history-table { display: block; min-width: 0; background: transparent; }
.defra-beta-history-table thead { display: none; }
.defra-beta-history-table tbody { display: block; }
.defra-beta-history-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; padding: 10px; border-bottom: 1px solid var(--line); background: var(--panel); }
.defra-beta-history-table tr:last-child { border-bottom: 0; }
.defra-beta-history-table td { display: block; min-width: 0; padding: 0; border: 0; }
.defra-beta-history-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
.defra-beta-history-table td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; }
.defra-beta-history-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
.defra-beta-history-table td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; padding-top: 5px; border-top: 1px dashed var(--line); }
.defra-beta-history-table td:nth-child(4)::before { content: "DEFRA response"; display: block; margin-bottom: 3px; color: var(--muted); font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; }
.defra-beta-history-table .defra-beta-response-error { display: block; font-size: .7rem; line-height: 1.4; }
.defra-payload-preview { max-height: 320px; font-size: .61rem; }

}
.defra-page-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 0; }
.defra-page-heading h2 { margin:4px 0; }
.defra-page-heading p { margin:0; color:var(--muted); }
.defra-secondary-details { min-width:0; border:1px solid var(--line); border-radius:10px; padding:12px; background:var(--panel); }
.defra-secondary-details > summary { cursor:pointer; min-height:28px; font-weight:700; color:var(--text); }
.defra-secondary-details[open] > summary { margin-bottom:12px; }
.defra-results-disclosure { margin:16px 0; }
.defra-profile-summary { display:block; margin-top:6px; color:var(--muted); font-size:.82rem; font-weight:400; line-height:1.6; }
.defra-edit-label { display:block; margin-top:6px; color:var(--text); font-size:.8rem; }
.defra-form-group { grid-column:1 / -1; margin:14px 0 0; padding-bottom:8px; border-bottom:1px solid var(--line); }
.defra-review-facts { margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.defra-review-facts > div { min-width:0; padding:10px; border-bottom:1px solid var(--line); }
.defra-review-facts dt { color:var(--muted); font-size:.78rem; margin-bottom:5px; }
.defra-review-facts dd { margin:0; overflow-wrap:anywhere; font-weight:600; }
.defra-review-facts > .defra-review-group { grid-column:1 / -1; border:1px solid var(--line); border-radius:8px; }
.defra-review-group > dt { color:var(--text); font-weight:700; margin-bottom:10px; }
.defra-beta-page .defra-beta-panel { background:var(--panel); border-color:var(--line); }
.defra-beta-page .defra-beta-profile > summary { padding:16px; }
.defra-beta-page .defra-beta-prepare { border:0; padding:0; }
.defra-beta-page .defra-required-note { font-size:.78rem; color:var(--muted); }
.defra-select-description { display:block; line-height:1.5; overflow-wrap:anywhere; }
@media (max-width:680px) {
.defra-page-heading { align-items:flex-start; flex-direction:column; gap:8px; }
.defra-review-facts { grid-template-columns:1fr; gap:6px; }
.defra-beta-page .defra-beta-profile > summary { align-items:flex-start; padding:12px; }
.defra-beta-page .defra-beta-profile > summary small { text-align:left; }
.defra-secondary-details { padding:10px; }

}
.defra-beta-profile > .form { padding:20px; gap:16px; }
.defra-beta-profile > .form > p { margin:0; line-height:1.5; }
.defra-beta-profile .grid.two { align-items:start; column-gap:24px; row-gap:18px; margin-top:0; }
.defra-beta-profile .field { display:flex; flex-direction:column; align-items:stretch; gap:6px; min-width:0; }
.defra-beta-profile .field > label { margin:0; line-height:1.4; }
.defra-beta-profile .field :is(input, select) { flex:none; height:44px; min-height:44px; min-width:0; max-width:100%; margin:0; box-sizing:border-box; }
.defra-beta-profile .field > small { margin:0; color:var(--muted); font-size:.75rem; line-height:1.4; }
.defra-beta-profile .field > .defra-select-description { display:none; }
.defra-beta-profile .defra-form-group { margin:8px 0 0; padding-bottom:10px; }
.defra-beta-profile > .form > button[type="submit"] { justify-self:end; width:auto; min-width:148px; min-height:44px; padding:10px 22px; margin:0; }
@media (max-width:680px) {
.defra-beta-profile > .form { padding:16px; }
.defra-beta-profile .grid.two { grid-template-columns:minmax(0,1fr); gap:16px; }
.defra-beta-profile #defra-recovery-code + .defra-select-description { display:block; }
.defra-beta-profile #defra-recovery-code + .defra-select-description + small { display:none; }

}
.admin-design-defraBeta > .admin-design-heading { display: none; }
.admin-design-defraBeta .admin-design-content { padding-top: 0; }
.defra-workspace { width: 100%; max-width: none; margin: 0; min-width: 0; box-sizing: border-box; }
.defra-workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.defra-workspace-heading h2 { margin: 0 0 5px; font-size: 1.5rem; letter-spacing: -.025em; }
.defra-workspace-heading p { margin: 0; color: var(--muted); font-size: .85rem; }
.defra-workspace-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.defra-workspace-tabs button { display: flex; align-items: center; gap: 7px; width: auto; border: 0; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0; padding: 10px 16px; background: transparent; color: var(--muted); box-shadow: none; font-size: .86rem; }
.defra-workspace-tabs button[aria-current] { border-bottom-color: var(--ok); background: color-mix(in srgb, var(--ok) 7%, var(--panel)); color: var(--text); }
.defra-workspace-tabs button span { padding: 2px 6px; border-radius: 5px; background: color-mix(in srgb, var(--muted) 12%, var(--panel)); font-size: .7rem; }
.defra-workspace-tabs button .defra-unsaved-dot { color: var(--warn); background: none; }
.defra-workflow-steps { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0 0 16px; color: var(--muted); font-size: .78rem; }
.defra-workflow-steps li { display: flex; align-items: center; gap: 7px; }
.defra-workflow-steps li > span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; border: 1px solid var(--line); font-size: .7rem; }
.defra-workflow-steps .is-current { color: var(--text); font-weight: 700; }
.defra-workflow-steps .is-current > span { background: var(--ok); border-color: var(--ok); color: white; }
.defra-workflow-steps .is-done > span { border-color: var(--ok); color: var(--ok); }
.defra-workspace .defra-action-queue,
.defra-workspace .defra-beta-panel { margin: 0; border: 1px solid var(--line); padding: 18px; gap: 14px; background: var(--panel); }
.defra-workspace .section-title { margin: 0; padding: 0; border: 0; }
.defra-workspace .section-title p { font-size: .8rem; margin: 4px 0 0; }
.defra-queue-note { color: var(--muted); font-size: .75rem; margin: 0; }
.defra-workspace .defra-day-batch > summary { padding: 12px; }
.defra-workspace .defra-day-batch > summary strong { font-size: .86rem; }
.defra-workspace .defra-day-batch-actions { padding: 8px 12px; }
.defra-workspace button { min-height: 36px; }
.defra-workspace button:focus-visible,
.defra-workspace summary:focus-visible { outline: 2px solid var(--ok); outline-offset: 3px; }
.defra-review-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.defra-review-heading h3 { font-size: 1.25rem; margin: 7px 0 4px; }
.defra-review-heading p { margin: 0; color: var(--muted); font-size: .8rem; }
.defra-review-heading .link-button { min-height: 24px; padding: 0; width: auto; font-size: .78rem; }
.defra-load-context { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 20px; border-block: 1px solid var(--line); padding: 12px 0; }
.defra-load-context > span { display: grid; gap: 3px; min-width: 0; }
.defra-load-context small { color: var(--muted); font-size: .72rem; }
.defra-load-context strong { font-size: .84rem; overflow-wrap: anywhere; }
.defra-load-context > span > span { color: var(--muted); font-size: .75rem; }
.defra-workspace .defra-beta-prepare { gap: 10px; margin: 0; background: transparent; }
.defra-workspace .defra-secondary-details { padding: 10px 12px; }
.defra-workspace .defra-secondary-details > summary { min-height: 22px; font-size: .8rem; }
.defra-review-options > summary > span { margin-left: 8px; color: var(--muted); font-size: .72rem; font-weight: 400; }
.defra-options-grid { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 16px; align-items: start; }
.defra-options-grid .field { display: grid; gap: 5px; }
.defra-options-grid select { height: 40px; width: 100%; min-width: 0; padding: 7px 10px; }
.defra-workspace .defra-field-choices { grid-template-columns: 1fr 1fr; }
.defra-prepare-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.defra-prepare-bar > span { color: var(--muted); font-size: .78rem; }
.defra-prepare-bar button { width: auto; flex-shrink: 0; }
.defra-workspace .defra-beta-preview { border: 0; border-top: 1px solid var(--line); padding: 16px 0 0; border-radius: 0; gap: 14px; }
.defra-receipt-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.defra-receipt-card { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--panel) 98%, var(--ok)); }
.defra-receipt-card h4 { font-size: .86rem; margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.defra-receipt-card dl { margin: 0; display: grid; gap: 10px; }
.defra-receipt-card dl > div { display: grid; grid-template-columns: minmax(75px, .75fr) minmax(0, 1.25fr); gap: 8px; align-items: baseline; }
.defra-receipt-card dt { font-size: .73rem; color: var(--muted); }
.defra-receipt-card dd { margin: 0; font-size: .8rem; font-weight: 600; overflow-wrap: anywhere; }
.defra-waste-card dl > div:first-child dd { color: var(--ok); font-size: 1.12rem; letter-spacing: -.02em; }
.defra-send-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 4px; }
.defra-send-bar .defra-review-confirm { border: 0; background: transparent; padding: 0; }
.defra-send-bar > button { width: auto; flex-shrink: 0; }
.defra-setup-view,
.defra-history-view,
.defra-advanced-view { display: grid; gap: 16px; }
.defra-advanced-view > h3 { margin: 0; }
.defra-advanced-view > p { margin: -8px 0 0; color: var(--muted); font-size: .82rem; }
.defra-help-copy { font-size: .82rem; color: var(--muted); line-height: 1.6; }
.defra-workspace .defra-beta-submission-history { border: 0; padding-top: 0; }
@media (min-width: 801px) {
.defra-workspace .defra-action-table { display: table; width: 100%; table-layout: fixed; }
.defra-workspace .defra-action-table thead { display: table-header-group; }
.defra-workspace .defra-action-table tbody { display: table-row-group; }
.defra-workspace .defra-action-table tr { display: table-row; }
.defra-workspace .defra-action-table th,
.defra-workspace .defra-action-table td { display: table-cell; padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: .78rem; }
.defra-workspace .defra-action-table td::before { display: none; }
.defra-workspace .defra-action-table th:nth-child(1) { width: 11%; }
.defra-workspace .defra-action-table th:nth-child(2) { width: 15%; }
.defra-workspace .defra-action-table th:nth-child(3) { width: 32%; }
.defra-workspace .defra-action-table th:nth-child(4) { width: 23%; }
.defra-workspace .defra-action-table th:nth-child(5) { width: 19%; }
.defra-workspace .defra-action-table td:last-child { text-align: right; }
.defra-workspace .defra-action-table button { width: auto; }

}
@media (max-width: 800px) {
.defra-receipt-cards { grid-template-columns: 1fr; }
.defra-options-grid { grid-template-columns: 1fr; }
.defra-load-context { grid-template-columns: 1fr 1fr; gap: 12px; }
.defra-load-context button { justify-self: start; grid-column: 1 / -1; }
.defra-workspace .defra-action-table .status { white-space: normal; }

}
@media (max-width: 520px) {
.defra-workspace-heading { align-items: flex-start; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.defra-workspace-heading h2 { font-size: 1.3rem; }
.defra-workspace-tabs { gap: 0; }
.defra-workspace-tabs button { padding: 10px 8px; font-size: .78rem; flex: 1; justify-content: center; }
.defra-workspace-tabs button span { display: none; }
.defra-workflow-steps { gap: 12px; font-size: .7rem; justify-content: space-between; }
.defra-workflow-steps li { gap: 4px; }
.defra-workspace .defra-action-queue,
.defra-workspace .defra-beta-panel { padding: 12px; }
.defra-workspace .defra-field-choices { grid-template-columns: 1fr; }
.defra-send-bar,
.defra-prepare-bar { align-items: stretch; flex-direction: column; }
.defra-load-context { grid-template-columns: 1fr; }
.defra-receipt-card dl > div { grid-template-columns: minmax(90px, .65fr) minmax(0, 1.35fr); }

}
.admin-design-defraBeta .defra-workspace .section-title { margin: 0; padding: 0; border: 0; }
.defra-workspace .section-title h4,
.defra-workspace .section-title h3 { margin: 0; }
.defra-review-heading-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.defra-review-heading .defra-review-destination { margin-top: 6px; }
.defra-review-options .defra-prepare-bar { margin-top: 12px; }
@media (max-width: 520px) {
.defra-review-heading { align-items: flex-start; }
.defra-review-heading-actions { flex-direction: column; align-items: flex-end; gap: 6px; }
.defra-review-heading-actions button { font-size: .72rem; }

}
.defra-workspace .defra-day-batch-actions { flex-wrap: wrap; gap: 8px; }
.defra-workspace .defra-day-batch-actions > span { flex: 1 1 300px; }
.defra-daily-review { padding: 18px; background: #fff; border: 1px solid #d6e0e9; border-radius: 12px; }
.defra-batch-counts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 16px 0; padding: 12px 16px; background: #f1f7f3; border-radius: 8px; }
.defra-batch-counts strong { font-size: 20px; margin-right: 4px; }
.defra-batch-hint { font-size: 13px; color: var(--muted); }
.defra-batch-items { display: grid; gap: 8px; }
.defra-batch-items > details { border: 1px solid #d6e0e9; border-radius: 8px; overflow: hidden; }
.defra-batch-items > details > summary { display: grid; grid-template-columns: 150px 100px minmax(140px,1fr) 130px minmax(180px,auto); align-items: center; gap: 12px; padding: 12px; cursor: pointer; background: #f8fafb; font-size: 13px; }
.defra-batch-items > details > summary > strong::before { content: '▸ '; }
.defra-batch-items > details[open] > summary > strong::before { content: '▾ '; }
.defra-batch-items > details > summary .status { justify-self: end; }
.defra-batch-item-body { padding: 12px; }
.defra-batch-item-body > p { margin: 0 0 10px; }
.defra-batch-issues { color: #874214; padding-left: 20px; }
.defra-batch-send-panel { margin-top: 18px; padding: 16px; border: 1px solid #c7ddcf; background: #f5faf6; border-radius: 8px; }
.defra-batch-send-panel h4 { margin: 0 0 6px; }
.defra-batch-send-panel p { margin: 6px 0 12px; }
.defra-batch-send-panel label { display: flex; align-items: start; gap: 8px; margin: 12px 0; font-weight: 500; }
.defra-batch-send-panel input[type=checkbox] { width: 18px; height: 18px; flex: 0 0 18px; margin: 1px 0 0; }
.defra-batch-send-panel > button { margin: 4px 8px 8px 0; }
.defra-batch-send-panel > small { display: block; color: var(--muted); }
.defra-last-batch,
.defra-batch-history > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px; border: 1px solid #d6e0e9; border-radius: 8px; margin-bottom: 10px; }
.defra-last-batch { background: #f0f6fc; }
.defra-batch-history { margin-bottom: 24px; }
.defra-batch-history small { display: block; color: var(--muted); margin-top: 4px; }
@media (max-width: 1050px) {
.defra-batch-items > details > summary { grid-template-columns: 1fr 1fr; }
.defra-batch-items > details > summary > span:nth-child(3) { grid-column: 1 / -1; }
.defra-batch-items > details > summary .status { justify-self: start; }

}
@media (max-width: 600px) {
.defra-daily-review { padding: 12px; }
.defra-daily-review > .defra-review-heading { flex-direction: column; align-items: flex-start; }
.defra-batch-counts { gap: 10px; display: grid; grid-template-columns: 1fr 1fr; }
.defra-batch-items > details > summary { gap: 6px; }
.defra-batch-items > details > summary .status { grid-column: 1 / -1; }
.defra-last-batch { align-items: start; flex-direction: column; }
.defra-batch-send-panel > button { width: 100%; }

}

/* Production receipt workspace: scoped to keep the live Loads page unchanged. */
.admin-design-defraBeta > .admin-design-heading { display: none; }
.admin-design-defraBeta .admin-design-content { padding-top: 0; }
.defra-workspace { min-width: 0; width: 100%; max-width: 1100px; margin: 0 auto; }
.defra-workspace-heading { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; align-items: flex-start; }
.defra-workspace-heading h2 { margin: 0 0 6px; font-size: clamp(1.4rem, 3vw, 1.8rem); line-height: 1.2; }
.defra-workspace-heading p { margin: 0; font-size: .9rem; line-height: 1.5; }
.defra-workspace-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; margin-bottom: 18px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.defra-workspace-tabs button { min-width: 0; min-height: 46px; padding: 8px; border: 0; border-radius: 8px; font: inherit; font-size: .85rem; font-weight: 700; color: var(--muted); background: transparent; justify-content: center; white-space: normal; }
.defra-workspace-tabs button[aria-current] { color: #176936; background: #eaf5ed; box-shadow: inset 0 0 0 1px #c9e3d1; }
.defra-workflow-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; list-style: none; padding: 0; margin: 0 0 18px; }
.defra-workflow-steps li { display: flex; gap: 7px; align-items: center; font-size: .8rem; line-height: 1.35; }
.defra-workflow-steps li > span { flex: 0 0 26px; width: 26px; height: 26px; }
.defra-connection-note { padding: 12px 14px; margin: 0 0 18px; border: 1px solid #e8d8ac; border-radius: 10px; color: #675016; background: #fff9e9; font-size: .85rem; line-height: 1.5; }
.defra-connection-note strong, .defra-connection-note span { display: block; }
.defra-workspace :is(.defra-action-queue,.defra-connection-panel,.defra-setup-view,.defra-history-view) { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.defra-workspace .section-title { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 0; }
.defra-workspace .section-title > div { min-width: 0; flex: 1; }
.defra-workspace .section-title > .status { flex: 0 0 auto; white-space: nowrap; }
.defra-workspace .section-title h3 { font-size: 1.1rem; line-height: 1.35; margin: 0 0 6px; }
.defra-workspace .section-title p { line-height: 1.5; }
.defra-workspace .defra-queue-note { margin: 12px 0; padding: 12px 0; border-top: 1px solid var(--line); font-size: .8rem; line-height: 1.5; color: var(--muted); }
.defra-workspace .empty { min-height: 0; padding: 28px 16px; display: grid; gap: 8px; text-align: center; line-height: 1.5; }
.defra-workspace .empty span { font-size: .85rem; }
.defra-connection-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 18px 0; }
.defra-connection-facts > div { display: grid; gap: 6px; padding: 14px; background: var(--soft); border-radius: 10px; }
.defra-connection-facts dt { font-size: .8rem; color: var(--muted); }
.defra-connection-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.defra-workspace :is(input,select,textarea) { max-width: 100%; box-sizing: border-box; }
.defra-workspace :is(button,summary) { min-height: 44px; }
@media (max-width: 600px) {
  .defra-workspace-heading { display: block; }
  .defra-workspace-heading .test-mode-badge { margin-top: 10px; white-space: normal; }
  .defra-workspace-tabs button { font-size: .78rem; padding: 8px 4px; }
  .defra-workspace-tabs button span { display: none; }
  .defra-workflow-steps li { flex-direction: column; text-align: center; gap: 6px; font-size: .75rem; }
  .defra-workspace :is(.defra-action-queue,.defra-connection-panel,.defra-setup-view,.defra-history-view) { padding: 14px; }
  .defra-connection-facts { grid-template-columns: 1fr; }
  .defra-workspace .defra-day-batch-actions { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; }
  .defra-workspace .defra-day-batch-actions > span { min-height: 0; }
  .defra-workspace .defra-day-batch-actions > button { width: 100%; }
  .defra-workspace :is(input,select,textarea) { font-size: 16px; }
}

.settings-beta-card .permission-toggle { gap: 16px; }

[data-login-error]:not([hidden]) {
  margin: 0;
  padding: 12px;
  color: #932018;
  background: #fff1ef;
  border: 1px solid #edb5ae;
  border-radius: 10px;
}
html[data-theme="dark"] [data-login-error]:not([hidden]) {
  color: #ffd9d4;
  background: #442725;
  border-color: #88514a;
}

/* Production connection editor: private account Beta settings. */
.defra-connection-panel form { display: grid; gap: 14px; margin: 18px 0; }
.defra-connection-panel form label { display: grid; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; }
.defra-connection-panel form .grid.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.defra-connection-panel form input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border, #d5dfdc); border-radius: 10px; background: var(--panel, #fff); color: var(--text, #132c24); font: inherit; font-size: 16px; }
.defra-connection-panel form input:read-only { background: var(--bg, #f4f6f8); }
.defra-connection-panel form button { min-height: 44px; padding: 10px 14px; border-radius: 10px; font-weight: 600; cursor: pointer; }
.defra-connection-panel form button[type="submit"] { background: #187b32; color: #fff; border: 0; }
.defra-connection-panel form button:disabled { opacity: .6; cursor: default; }
.defra-connection-panel [data-defra-connection-result]:empty { display: none; }
.defra-connection-panel [data-defra-connection-result] { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .defra-connection-panel form .grid.two { grid-template-columns: 1fr; } }

.defra-automation-panel{margin:12px 0;padding:12px 16px;border:1px solid #d6e3da;border-radius:12px;background:#f5faf6}
.defra-automation-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.defra-automation-row h3{margin:0;font-size:1rem;line-height:1.3}
.defra-automation-panel .defra-automation-switch{display:flex;align-items:center;gap:8px;flex:none;min-height:44px;padding:0 2px;border:0;border-radius:8px;background:transparent;box-shadow:none;color:#526359;font-size:.85rem;font-weight:600}
.defra-switch-track{display:block;position:relative;width:42px;height:24px;border-radius:99px;background:#89978f;transition:background .15s}
.defra-switch-track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .15s}
.defra-automation-switch[aria-checked="true"] .defra-switch-track{background:#22863b}
.defra-automation-switch[aria-checked="true"] .defra-switch-track::after{transform:translateX(18px)}
.defra-automation-switch:focus-visible{outline:3px solid #286893;outline-offset:3px}
.defra-automation-switch:disabled{opacity:.55}
.defra-automation-panel .defra-automation-times{margin:0;color:#617069;font-size:.8rem;line-height:1.5}
.defra-automation-details{margin-top:4px}
.defra-automation-details>summary{display:list-item;cursor:pointer;width:fit-content;padding:6px 0;color:#286140;font-size:.8rem}
.defra-automation-details>div{padding-top:8px;font-size:.9rem;line-height:1.5}
.defra-automation-details p{margin:0 0 12px}
.defra-automation-panel .defra-automation-warning{margin:4px 0;color:#994715;font-size:.8rem}
.defra-automation-panel .notice{margin-top:10px}
@media(prefers-reduced-motion:reduce){.defra-switch-track,.defra-switch-track::after{transition:none}}