@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

/*
 * Spotlight redesign (October 2026): one layer over the Hyper theme.
 * Colours come from the theme's own --ct-* variables, so pages, popups and
 * tables follow it. Maps keep their original look: the original values are
 * restored inside every .leaflet-container, and the Voyage map is an iframe.
 */

/* ------------------------------------------------------------ palette */
:root,
html[data-bs-theme="light"] {
  --sp-bg: #eef2f6;
  --sp-panel: #ffffff;
  --sp-panel2: #f5f7fa;
  --sp-field: #f1f4f8;
  --sp-line: #e2e8ef;
  --sp-line2: #cbd5e1;
  --sp-text: #101923;
  --sp-muted: #566578;
  --sp-faint: #8592a3;
  --sp-accent: #e0af6c;
  --sp-accent-text: #a8741f;
  --sp-accent-hover: #ebbd7f;
  --sp-accent-soft: rgba(224, 175, 108, .16);
  --sp-ink: #1a1206;
  --sp-red: #d42f4c;
  --sp-red-soft: rgba(212, 47, 76, .1);
  --sp-green: #138a57;
  /* Russian history (RU): indigo, the cool counterpart of the gold accent. */
  --sp-ru: #4f46e5;
  --sp-ru-row: #d9dcfc;
  --sp-ru-row-hover: #cdd1fa;
}

html[data-bs-theme="dark"] {
  --sp-bg: #0c1219;
  --sp-panel: #131b24;
  --sp-panel2: #18222d;
  --sp-field: #1c2733;
  --sp-line: #232f3c;
  --sp-line2: #324152;
  --sp-text: #e9eef4;
  --sp-muted: #8b99aa;
  --sp-faint: #5f6d7e;
  --sp-accent-text: #e0af6c;
  --sp-red: #ff6b81;
  --sp-red-soft: rgba(255, 107, 129, .12);
  --sp-green: #3ecf8e;
  --sp-ru: #818cf8;
  --sp-ru-row: #333d78;
  --sp-ru-row-hover: #3b4687;

  --ct-body-bg: #0c1219;
  --ct-body-bg-rgb: 12, 18, 25;
  --ct-body-color: #e9eef4;
  --ct-body-color-rgb: 233, 238, 244;
  --ct-emphasis-color: #e9eef4;
  --ct-emphasis-color-rgb: 233, 238, 244;
  --ct-heading-color: #e9eef4;
  --ct-secondary-color: #8b99aa;
  --ct-secondary-color-rgb: 139, 153, 170;
  --ct-secondary-bg: #131b24;
  --ct-secondary-bg-rgb: 19, 27, 36;
  --ct-tertiary-bg: #18222d;
  --ct-tertiary-bg-rgb: 24, 34, 45;
  --ct-border-color: #232f3c;
  --ct-border-color-translucent: #324152;
  --ct-input-bg: #1c2733;
  --ct-light: #232f3c;
  --ct-light-rgb: 35, 47, 60;
  --ct-link-color: #cfd8e3;
  --ct-link-color-rgb: 207, 216, 227;
  --ct-link-hover-color: #ffffff;
  --ct-link-hover-color-rgb: 255, 255, 255;
  --ct-topbar-bg: #131b24;
  --ct-topbar-item-color: #8b99aa;
  --ct-topbar-item-hover-color: #e9eef4;
  --precise-topbar-text: #8b99aa;
  --precise-topbar-text-strong: #e9eef4;
  --precise-topbar-accent: #e0af6c;
  --precise-topbar-action-hover: #18222d;
  --dt-normal-row-bg: #131b24;
  --dt-normal-row-hover: #18222d;
  scrollbar-color: #324152 transparent;
}

html[data-bs-theme] {
  --ct-body-font-family: "Instrument Sans", "Nunito", sans-serif;
  --ct-font-sans-serif: "Instrument Sans", "Nunito", sans-serif;
  --ct-font-monospace: "IBM Plex Mono", ui-monospace, monospace;
}

/* Maps: original colours, font and corners. */
html[data-bs-theme="dark"] .leaflet-container {
  --ct-body-bg: #343a40;
  --ct-body-bg-rgb: 52, 58, 64;
  --ct-body-color: #ffffff;
  --ct-body-color-rgb: 255, 255, 255;
  --ct-emphasis-color: #dee2e6;
  --ct-emphasis-color-rgb: 222, 226, 230;
  --ct-heading-color: #ffffff;
  --ct-secondary-color: #8391a2;
  --ct-secondary-color-rgb: 131, 145, 162;
  --ct-secondary-bg: #37404a;
  --ct-secondary-bg-rgb: 55, 64, 74;
  --ct-tertiary-bg: #404954;
  --ct-tertiary-bg-rgb: 64, 73, 84;
  --ct-border-color: #464f5b;
  --ct-border-color-translucent: #8391a2;
  --ct-input-bg: #404954;
  --ct-light: #464f5b;
  --ct-light-rgb: 70, 79, 91;
  --ct-link-color: rgb(102, 140.4, 159.6);
  --ct-link-color-rgb: 102, 140, 160;
  --ct-link-hover-color: rgb(124.95, 157.59, 173.91);
  --ct-link-hover-color-rgb: 125, 158, 174;
}

html[data-bs-theme] .leaflet-container {
  --ct-body-font-family: "Nunito", sans-serif;
  --ct-font-sans-serif: "Nunito", sans-serif;
}

/* ------------------------------------------------------------ base */
html[data-bs-theme] body {
  background-color: var(--sp-bg);
  letter-spacing: 0;
}

html[data-bs-theme] .content-page,
html[data-bs-theme] .wrapper {
  background-color: var(--sp-bg);
}

html[data-bs-theme] .text-muted {
  color: var(--sp-muted) !important;
}

html[data-bs-theme] .footer {
  color: var(--sp-faint);
  border-top: 1px solid var(--sp-line);
  background: transparent;
}

/* ------------------------------------------------------------ header */
html[data-bs-theme] .navbar-custom {
  background: var(--sp-panel);
  border-bottom: 1px solid var(--sp-line);
  box-shadow: none;
}

html[data-bs-theme] body.precise-header-nav-mounted .precise-header-bar__tabs,
html[data-bs-theme] body.itinerary-header-mounted .itinerary-header-bar__tabs {
  align-items: center;
  gap: 4px;
  /* As tall as production's tabs: the header keeps its height when the tabs wrap
     onto their own row on narrow screens. */
  min-height: 60px;
}

html[data-bs-theme] body.precise-header-nav-mounted .precise-header-bar__tab,
html[data-bs-theme] body.itinerary-header-mounted .itinerary-header-bar__tab {
  padding: 9px 14px;
  border-radius: 8px;
  color: var(--sp-muted);
  font-size: .98rem;
  font-weight: 500;
}

html[data-bs-theme] body.precise-header-nav-mounted .precise-header-bar__tab:hover,
html[data-bs-theme] body.itinerary-header-mounted .itinerary-header-bar__tab:hover {
  color: var(--sp-text);
  background: var(--sp-panel2);
}

html[data-bs-theme] body.precise-header-nav-mounted .precise-header-bar__tab.is-active,
html[data-bs-theme] body.itinerary-header-mounted .itinerary-header-bar__tab.is-active {
  color: var(--sp-text);
  font-weight: 600;
  background: var(--sp-panel2);
  box-shadow: inset 0 -2px 0 var(--sp-accent);
}

html[data-bs-theme] body.precise-header-nav-mounted .precise-header-bar__tab.is-active::after,
html[data-bs-theme] body.itinerary-header-mounted .itinerary-header-bar__tab.is-active::after {
  display: none;
}

html[data-bs-theme] body.precise-header-nav-mounted .precise-header-bar__action,
html[data-bs-theme] body.itinerary-header-mounted .itinerary-header-bar__action {
  min-height: 38px;
  border-radius: 8px;
  color: var(--sp-muted);
  font-weight: 500;
}

html[data-bs-theme] body.precise-header-nav-mounted #precise-header-search-btn {
  border-color: var(--sp-line2);
  background: var(--sp-field);
}

html[data-bs-theme] body.itinerary-header-mounted #itinerary-header-search-btn {
  border: 1px solid var(--sp-line2);
  background: var(--sp-field);
}

html[data-bs-theme] .navbar-custom .topbar-menu .nav-link {
  color: var(--sp-muted);
}

html[data-bs-theme] .navbar-custom .nav-user {
  background: transparent;
  border-color: var(--sp-line2);
}

/* ------------------------------------------------------------ panels and popups */
html[data-bs-theme] .card {
  --ct-card-border-radius: 14px;
  --ct-card-inner-border-radius: 13px;
  --ct-card-box-shadow: none;
  --ct-card-border-color: var(--sp-line);
  --ct-card-bg: var(--sp-panel);
  border: 1px solid var(--sp-line);
  box-shadow: none;
}

html[data-bs-theme] .card-header {
  border-bottom: 1px solid var(--sp-line);
  background: transparent;
  font-weight: 600;
}

html[data-bs-theme] .modal-content {
  --ct-modal-bg: var(--sp-panel);
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

html[data-bs-theme] .modal-header,
html[data-bs-theme] .modal-footer {
  border-color: var(--sp-line);
}

html[data-bs-theme] .modal-title {
  font-weight: 600;
}

html[data-bs-theme] .modal-backdrop.show {
  opacity: .6;
}

html[data-bs-theme] .dropdown-menu {
  border: 1px solid var(--sp-line2);
  border-radius: 10px;
}

/* ------------------------------------------------------------ fields */
html[data-bs-theme] .form-control:not(.leaflet-container *),
html[data-bs-theme] .form-select:not(.leaflet-container *) {
  border-color: var(--sp-line2);
  border-radius: 9px;
  background-color: var(--sp-field);
}

html[data-bs-theme] .form-control:not(.leaflet-container *):focus,
html[data-bs-theme] .form-select:not(.leaflet-container *):focus {
  border-color: var(--sp-accent);
  box-shadow: 0 0 0 .2rem var(--sp-accent-soft);
}

html[data-bs-theme] .form-control::placeholder {
  color: var(--sp-faint);
}

html[data-bs-theme] .input-group-text:not(.leaflet-container *) {
  border-color: var(--sp-line2);
  background-color: var(--sp-field);
}

html[data-bs-theme] label:not(.leaflet-container *):not(.form-check-label) {
  color: var(--sp-muted);
  font-weight: 500;
}

html[data-bs-theme] .form-check-input:not(.leaflet-container *):checked {
  border-color: var(--sp-accent);
  background-color: var(--sp-accent);
}

html[data-bs-theme] .form-check-input:not(.leaflet-container *):focus {
  border-color: var(--sp-accent);
  box-shadow: 0 0 0 .2rem var(--sp-accent-soft);
}

/* Switches everywhere outside the maps: gold when on, inside their row. */
html[data-bs-theme] .form-switch .form-check-input:not(.leaflet-container *) {
  width: 2.25rem;
  height: 1.25rem;
  /* Fits the label's line, so rows keep production's height. */
  margin-top: .05rem;
  border: 1px solid var(--sp-line2);
  background-color: var(--sp-line2);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  cursor: pointer;
}

html[data-bs-theme] .form-switch .form-check-input:not(.leaflet-container *):checked {
  border-color: var(--sp-accent);
  background-color: var(--sp-accent);
}

/* ------------------------------------------------------------ buttons */
html[data-bs-theme] .btn:not(.leaflet-container *) {
  border-radius: 8px;
  font-weight: 500;
}

html[data-bs-theme] .btn-secondary:not(.leaflet-container *),
html[data-bs-theme] .btn-light:not(.leaflet-container *),
html[data-bs-theme] .btn-outline-secondary:not(.leaflet-container *) {
  --ct-btn-color: var(--sp-text);
  --ct-btn-bg: transparent;
  --ct-btn-border-color: var(--sp-line2);
  --ct-btn-hover-color: var(--sp-text);
  --ct-btn-hover-bg: var(--sp-panel2);
  --ct-btn-hover-border-color: var(--sp-muted);
  --ct-btn-active-color: var(--sp-text);
  --ct-btn-active-bg: var(--sp-panel2);
  --ct-btn-active-border-color: var(--sp-accent);
  --ct-btn-disabled-color: var(--sp-muted);
  --ct-btn-disabled-bg: transparent;
  --ct-btn-disabled-border-color: var(--sp-line2);
  box-shadow: none;
}

html[data-bs-theme] .btn-danger:not(.leaflet-container *) {
  --ct-btn-color: var(--sp-red);
  --ct-btn-bg: transparent;
  --ct-btn-border-color: var(--sp-red);
  --ct-btn-hover-color: var(--sp-red);
  --ct-btn-hover-bg: var(--sp-red-soft);
  --ct-btn-hover-border-color: var(--sp-red);
  --ct-btn-active-color: var(--sp-red);
  --ct-btn-active-bg: var(--sp-red-soft);
  --ct-btn-active-border-color: var(--sp-red);
  box-shadow: none;
}

/* Main actions in gold. */
html[data-bs-theme] .btn-primary:not(.leaflet-container *),
html[data-bs-theme] .button--primary.btn:not(.leaflet-container *),
html[data-bs-theme] #itinerary-save-update,
html[data-bs-theme] #user-login-form .form-submit,
html[data-bs-theme] .user-pass .form-submit,
html[data-bs-theme] #datatable .dt-actions-col .btn-secondary,
html[data-bs-theme] .vessel-pdf-options [data-pdf-confirm],
html[data-bs-theme] #fleet-add-ship-btn,
html[data-bs-theme] #itin-submit,
html[data-bs-theme] #raw-company-data-modal .company-data-view-btn {
  --ct-btn-color: var(--sp-ink);
  --ct-btn-bg: var(--sp-accent);
  --ct-btn-border-color: var(--sp-accent);
  --ct-btn-hover-color: var(--sp-ink);
  --ct-btn-hover-bg: var(--sp-accent-hover);
  --ct-btn-hover-border-color: var(--sp-accent-hover);
  --ct-btn-active-color: var(--sp-ink);
  --ct-btn-active-bg: var(--sp-accent-hover);
  --ct-btn-active-border-color: var(--sp-accent-hover);
  font-weight: 600;
  box-shadow: none;
}

html[data-bs-theme] table#datatable.dataTable tbody tr > td.dt-actions-col .btn-secondary,
html[data-bs-theme] table#datatable.dataTable tbody tr > td.dt-actions-col .btn-secondary * {
  color: var(--sp-ink) !important;
}

/* "New" buttons: gold outline. */
html[data-bs-theme] [data-bs-target="#positionlistCreateModal"].btn,
html[data-bs-theme] #itinerary-create-btn,
html[data-bs-theme] .fleet-create-btn {
  --ct-btn-color: var(--sp-accent-text);
  --ct-btn-bg: transparent;
  --ct-btn-border-color: var(--sp-accent);
  --ct-btn-hover-color: var(--sp-accent-text);
  --ct-btn-hover-bg: var(--sp-accent-soft);
  --ct-btn-hover-border-color: var(--sp-accent);
  font-weight: 600;
}

/* DataTables toolbars (Copy, CSV, PDF, Market evolution, Full page, Export PDF...). */
html[data-bs-theme] body div.dt-buttons > .dt-button,
html[data-bs-theme] body div.dt-buttons > div.dt-button-split .dt-button {
  /* The bottom margin stays DataTables', so toolbars keep production's height. */
  margin-top: 0;
  margin-right: 6px;
  margin-left: 0;
  padding: .38rem .85rem;
  border: 1px solid var(--sp-line2) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--sp-text) !important;
  font-size: .85rem;
  font-weight: 500;
  box-shadow: none !important;
}

html[data-bs-theme] body div.dt-buttons > .dt-button:hover:not(.disabled) {
  border-color: var(--sp-muted) !important;
  background: var(--sp-panel2) !important;
}

html[data-bs-theme] body div.dt-buttons > .dt-button.disabled {
  opacity: .5;
}

html[data-bs-theme] .dataTables_wrapper .dataTables_filter input,
html[data-bs-theme] .dt-search-container input {
  border: 1px solid var(--sp-line2);
  border-radius: 9px;
  background-color: var(--sp-field);
  color: var(--sp-text);
}

/* ------------------------------------------------------------ tables */
html[data-bs-theme] table.dataTable:not(.leaflet-container *) thead th,
html[data-bs-theme] table.dataTable:not(.leaflet-container *) thead td {
  background: var(--sp-panel2);
  color: var(--sp-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--sp-line) !important;
}

html[data-bs-theme] table.dataTable:not(.leaflet-container *) tbody td,
html[data-bs-theme] .table:not(.leaflet-container *) > :not(caption) > * > * {
  border-color: var(--sp-line);
}

html[data-bs-theme] table.dataTable:not(.leaflet-container *) tbody td {
  font-variant-numeric: tabular-nums;
}

html[data-bs-theme] .badge-outline-success {
  border-color: var(--sp-green);
  color: var(--sp-green);
  border-radius: 5px;
}

/* ------------------------------------------------------------ list sidebars */
/* The list fits its panel: no sideways scroll, long names wrap. */
html[data-bs-theme] #my-position-lists .table-responsive {
  overflow-x: hidden;
}

html[data-bs-theme] #my-position-lists table.views-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 2px;
}

html[data-bs-theme] #my-position-lists table.views-table td.views-field-link-flag {
  width: 34px;
  padding-right: 0;
  padding-left: 8px;
}

html[data-bs-theme] #my-position-lists table.views-table td.views-field-title {
  padding-right: 4px;
  padding-left: 6px;
  overflow-wrap: break-word;
}

html[data-bs-theme] #my-position-lists table.views-table td.views-field-delete-node {
  width: 40px;
  padding-right: 6px;
  padding-left: 2px;
}

html[data-bs-theme] #my-position-lists table.views-table td.views-field-delete-node .btn {
  padding-right: 7px;
  padding-left: 7px;
}

html[data-bs-theme] #my-position-lists table.views-table td {
  border: 0;
  background: transparent;
  --ct-table-bg-type: transparent;
  --ct-table-accent-bg: transparent;
  box-shadow: none;
  vertical-align: middle;
}

html[data-bs-theme] #my-position-lists table.views-table tr td:first-child {
  border-radius: 10px 0 0 10px;
}

html[data-bs-theme] #my-position-lists table.views-table tr td:last-child {
  border-radius: 0 10px 10px 0;
}

html[data-bs-theme] #my-position-lists table.views-table tr:hover td {
  background: var(--sp-panel2);
}

html[data-bs-theme] #my-position-lists table.views-table tr.sp-current td {
  background: var(--sp-field);
}

html[data-bs-theme] #my-position-lists table.views-table tr.sp-current td:first-child {
  box-shadow: inset 3px 0 0 var(--sp-accent);
}

html[data-bs-theme] #my-position-lists .views-field-title a {
  color: var(--sp-muted);
  font-weight: 600;
}

html[data-bs-theme] #my-position-lists tr.sp-current .views-field-title a {
  color: var(--sp-text);
}

html[data-bs-theme] #my-position-lists time {
  color: var(--sp-muted);
  font-size: .8rem;
}

html[data-bs-theme] #my-position-lists .action-flag a {
  color: var(--sp-faint);
}

html[data-bs-theme] #my-position-lists .btn-danger {
  --ct-btn-color: var(--sp-faint);
  --ct-btn-border-color: transparent;
  --ct-btn-hover-border-color: transparent;
}

html[data-bs-theme] #itinerary-list .itinerary-list-item {
  border-color: transparent;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}

html[data-bs-theme] #itinerary-list .itinerary-list-item:hover {
  background: var(--sp-panel2);
}

html[data-bs-theme] #itinerary-list .itinerary-list-item.active {
  background: var(--sp-field);
  box-shadow: inset 3px 0 0 var(--sp-accent);
}

html[data-bs-theme] #itinerary-list .itinerary-list-item__title {
  color: var(--sp-muted);
  font-weight: 600;
}

html[data-bs-theme] #itinerary-list .itinerary-list-item.active .itinerary-list-item__title {
  color: var(--sp-text);
}

html[data-bs-theme] #itinerary-list .itinerary-list-item__delete {
  --ct-btn-color: var(--sp-faint);
  --ct-btn-border-color: transparent;
  --ct-btn-hover-border-color: transparent;
}

/* Voyage start: the three radios as one switch. */
html[data-bs-theme] .itinerary-start-mode-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--sp-line2);
  border-radius: 10px;
  background: var(--sp-field);
}

html[data-bs-theme] .itinerary-start-mode-row > .form-check {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 0;
}

html[data-bs-theme] .itinerary-start-mode-row > .form-check > .form-check-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

html[data-bs-theme] .itinerary-start-mode-row > .form-check > .form-check-label {
  display: block;
  padding: 7px 6px;
  border-radius: 7px;
  color: var(--sp-muted);
  font-size: .85rem;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

html[data-bs-theme] .itinerary-start-mode-row > .form-check:has(.form-check-input:checked) > .form-check-label {
  background: var(--sp-accent);
  color: var(--sp-ink);
  font-weight: 600;
}

html[data-bs-theme] .itinerary-start-mode-row > .form-check:has(.form-check-input:focus-visible) > .form-check-label {
  outline: 2px solid var(--sp-accent);
  outline-offset: 1px;
}

/* ------------------------------------------------------------ KPI cards */
/* Sizes, padding and spacing stay production's (map_table_v2.js). */
html[data-bs-theme] #position-kpi-row .position-kpi-card {
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  background: var(--sp-panel2);
  box-shadow: none;
}

html[data-bs-theme] #position-kpi-row .position-kpi-label {
  color: var(--sp-muted);
  font-size: .78rem;
  font-weight: 500;
  /* The same line height as production's label. */
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

html[data-bs-theme] #position-kpi-row .position-kpi-value {
  color: var(--sp-text);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
}

html[data-bs-theme] #position-kpi-row .position-kpi-card.is-accent .position-kpi-value {
  color: var(--sp-red);
}

/* Russian history in the RU colour, as the RU rows of the list are. */
html[data-bs-theme] #position-kpi-row .position-kpi-card.is-muted .position-kpi-value {
  color: var(--sp-ru);
}

html[data-bs-theme] #position-kpi-row .position-kpi-breakdown {
  align-items: baseline;
  gap: 10px;
  margin: 0;
  color: var(--sp-muted);
  font-size: .8rem;
  font-weight: 500;
  line-height: 1;
}

html[data-bs-theme] #position-kpi-row .position-kpi-breakdown strong {
  margin-left: 2px;
  font-size: 1rem;
  font-weight: 600;
}

html[data-bs-theme] #position-kpi-row .position-kpi-breakdown .is-subs strong {
  color: var(--sp-red);
}

html[data-bs-theme] #position-kpi-row .position-kpi-breakdown .is-ru strong {
  color: var(--sp-ru);
}

/* ------------------------------------------------------------ AI Coworker */
html[data-bs-theme] body.ai-coworker-page-active {
  background: var(--sp-bg) !important;
}

html[data-bs-theme] .ai-coworker-page {
  background: var(--sp-bg);
}

html[data-bs-theme] .ai-coworker-title {
  font-weight: 600;
  letter-spacing: -.02em;
}

html[data-bs-theme] .ai-coworker-composer {
  background: linear-gradient(to top, var(--sp-bg) 75%, transparent);
}

html[data-bs-theme] .ai-coworker-form {
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--sp-line2);
  border-radius: 18px;
  background: var(--sp-panel);
  box-shadow: none;
}

html[data-bs-theme] .ai-coworker-form:focus-within {
  border-color: var(--sp-accent);
}

html[data-bs-theme] .ai-coworker-input {
  background: transparent;
  color: var(--sp-text);
}

html[data-bs-theme] .ai-coworker-input::placeholder {
  color: var(--sp-faint);
}

html[data-bs-theme] .ai-coworker-send {
  width: 52px;
  min-width: 52px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--sp-accent);
  color: var(--sp-ink);
  font-size: 1.3rem;
}

html[data-bs-theme] .ai-coworker-send:hover {
  background: var(--sp-accent-hover);
}

/* The border takes 1px of the padding: bubbles keep production's size. */
html[data-bs-theme] .ai-msg--assistant .ai-msg__bubble {
  padding: 13px 17px;
  border: 1px solid var(--sp-line);
  background: var(--sp-panel);
  color: var(--sp-text);
}

html[data-bs-theme] .ai-msg--user .ai-msg__bubble {
  padding: 13px 17px;
  border: 1px solid rgba(224, 175, 108, .28);
  background: var(--sp-accent-soft);
  color: var(--sp-text);
}

html[data-bs-theme] .ai-coworker-history-inline-btn {
  border: 1px solid var(--sp-line2);
  border-radius: 8px;
  background: transparent;
  color: var(--sp-muted);
}

html[data-bs-theme] .ai-coworker-history-inline-btn:hover {
  border-color: var(--sp-muted);
  background: var(--sp-panel2);
  color: var(--sp-text);
}

/* ------------------------------------------------------------ table row buttons */
/* Edit, Remove and View look the same on every row (normal, SUBS, RU) and in both themes:
   each has its own solid background, so the row colour never shows through, and a fixed
   text colour and weight. map_table_v2.css recolours them per row with !important (white
   text on SUBS and RU rows, lighter text on SUBS rows); :not(#sp) outranks it. */
html[data-bs-theme] body table#datatable.dataTable tbody tr td.dt-actions-col .btn-secondary:not(#sp) {
  --ct-btn-bg: var(--sp-accent) !important;
  --bs-btn-bg: var(--sp-accent) !important;
  background-color: var(--sp-accent) !important;
  border-color: var(--sp-accent) !important;
  color: var(--sp-ink) !important;
  -webkit-text-fill-color: var(--sp-ink) !important;
  font-weight: 600 !important;
}

html[data-bs-theme] body table#datatable.dataTable tbody tr td.dt-actions-col .btn-secondary:not(#sp):hover {
  background-color: var(--sp-accent-hover) !important;
  border-color: var(--sp-accent-hover) !important;
}

html[data-bs-theme] body table#datatable.dataTable tbody tr td.dt-actions-col .position-row-edit-btn:not(#sp) {
  --ct-btn-bg: var(--sp-panel) !important;
  --bs-btn-bg: var(--sp-panel) !important;
  background-color: var(--sp-panel) !important;
  border-color: var(--sp-line2) !important;
  color: var(--sp-text) !important;
  -webkit-text-fill-color: var(--sp-text) !important;
  font-weight: 500 !important;
}

html[data-bs-theme] body table#datatable.dataTable tbody tr td.dt-actions-col .position-row-edit-btn:not(#sp):hover {
  background-color: var(--sp-panel2) !important;
  border-color: var(--sp-muted) !important;
}

html[data-bs-theme] body table#datatable.dataTable tbody tr td.dt-actions-col .btn-danger:not(#sp) {
  --ct-btn-bg: var(--sp-panel) !important;
  --bs-btn-bg: var(--sp-panel) !important;
  background-color: var(--sp-panel) !important;
  border-color: var(--sp-red) !important;
  color: var(--sp-red) !important;
  -webkit-text-fill-color: var(--sp-red) !important;
  font-weight: 500 !important;
}

html[data-bs-theme] body table#datatable.dataTable tbody tr td.dt-actions-col .btn-danger:not(#sp):hover {
  background-image: linear-gradient(var(--sp-red-soft), var(--sp-red-soft)) !important;
}

/* ------------------------------------------------------------ popups */
html[data-bs-theme="dark"] .bg-light:not(.leaflet-container *) {
  background-color: var(--sp-panel2) !important;
}

html[data-bs-theme] .shadow-sm.bg-light:not(.leaflet-container *) {
  border-color: var(--sp-line) !important;
  box-shadow: none !important;
}

/* Vessel popup: the AIS periods as one switch. */
html[data-bs-theme] #vessel-ais-period-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  padding: 2px;
  border: 1px solid var(--sp-line2);
  border-radius: 10px;
  background: var(--sp-field);
}

/* With the switch's padding and border: production's button height, so the map keeps its size. */
html[data-bs-theme] #vessel-ais-period-filters > .btn {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  border: 0;
  line-height: 26px;
  border-radius: 7px;
  background: transparent;
  color: var(--sp-muted);
  font-weight: 500;
}

html[data-bs-theme] #vessel-ais-period-filters > .btn:hover {
  background: var(--sp-panel2);
  color: var(--sp-text);
}

html[data-bs-theme] #vessel-ais-period-filters > .btn.btn-secondary {
  background: var(--sp-accent);
  color: var(--sp-ink);
  font-weight: 600;
}

/* My company data: the row colours as a light wash with one bar at the start. */
html[data-bs-theme] #raw-company-data-table tbody tr.company-linewithprob-with-imo > td {
  background: rgba(224, 175, 108, .12) !important;
  box-shadow: inset 0 -1px 0 var(--sp-line) !important;
}

html[data-bs-theme] #raw-company-data-table tbody tr.company-linewithprob-no-imo > td {
  background: rgba(255, 107, 129, .12) !important;
  box-shadow: inset 0 -1px 0 var(--sp-line) !important;
}

html[data-bs-theme] #raw-company-data-table tbody tr.company-linewithprob-with-imo > td:first-child {
  box-shadow: inset 3px 0 0 var(--sp-accent), inset 0 -1px 0 var(--sp-line) !important;
}

html[data-bs-theme] #raw-company-data-table tbody tr.company-linewithprob-no-imo > td:first-child {
  box-shadow: inset 3px 0 0 var(--sp-red), inset 0 -1px 0 var(--sp-line) !important;
}

/* Header padding sized so the whole table fits the popup, Edit and View included. */
html[data-bs-theme] #raw-company-data-modal table.dataTable thead th {
  padding-right: 22px !important;
  padding-left: 10px !important;
}

html[data-bs-theme] #raw-company-data-modal table.dataTable thead th:last-child {
  padding-right: 10px !important;
}

html[data-bs-theme] .raw-company-data-colour-key__swatch--with-imo {
  --key-bg: rgba(224, 175, 108, .12);
  --key-border-color: var(--sp-accent);
}

html[data-bs-theme] .raw-company-data-colour-key__swatch--no-imo {
  --key-bg: rgba(255, 107, 129, .12);
  --key-border-color: var(--sp-red);
}

/* Voyage list: the delete button quiet until hovered. */
html[data-bs-theme] #itinerary-list .itinerary-list-item__delete {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--sp-faint) !important;
  box-shadow: none !important;
}

html[data-bs-theme] #itinerary-list .itinerary-list-item__delete:hover {
  border-color: var(--sp-red) !important;
  background: var(--sp-red-soft) !important;
  color: var(--sp-red) !important;
}

/* map_table_v2.css paints the bin and the voyage's date white: invisible on the light theme. */
html[data-bs-theme] #itinerary-list .itinerary-list-item__delete i {
  color: var(--sp-text) !important;
}

html[data-bs-theme] #itinerary-list .itinerary-list-item__delete:hover i {
  color: var(--sp-red) !important;
}

html[data-bs-theme="light"] #itinerary-list .itinerary-list-item__meta {
  color: var(--sp-muted);
}

html[data-bs-theme] .itinerary-port-remove-btn {
  border: 1px solid var(--sp-red) !important;
  background: transparent !important;
  color: var(--sp-red) !important;
  box-shadow: none !important;
}

html[data-bs-theme] .itinerary-port-remove-btn:hover {
  background: var(--sp-red-soft) !important;
}

/* ------------------------------------------------------------ Fleet */
html[data-bs-theme] .fleet-panel:not(.fleet-map-panel) {
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  background: var(--sp-panel);
  box-shadow: none;
}

html[data-bs-theme] .fleet-panel__header {
  border-bottom-color: var(--sp-line);
}

html[data-bs-theme] .fleet-panel__header h2 {
  color: var(--sp-text);
  font-weight: 600;
}

html[data-bs-theme] .fleet-list-item {
  border-color: transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--sp-muted);
}

html[data-bs-theme] .fleet-list-item:hover {
  background: var(--sp-panel2);
}

html[data-bs-theme] .fleet-list-item.is-active {
  background: var(--sp-field);
  box-shadow: inset 3px 0 0 var(--sp-accent);
  color: var(--sp-text);
}

html[data-bs-theme] .fleet-list-item__body strong {
  color: var(--sp-muted);
  font-weight: 600;
}

html[data-bs-theme] .fleet-list-item.is-active .fleet-list-item__body strong {
  color: var(--sp-text);
}

html[data-bs-theme] .fleet-list-item__body small {
  color: var(--sp-faint);
}

html[data-bs-theme] .fleet-list-item__delete {
  border: 1px solid transparent;
  background: transparent;
  color: var(--sp-faint);
  box-shadow: none;
}

html[data-bs-theme] .fleet-list-item__delete:hover {
  border-color: var(--sp-red);
  background: var(--sp-red-soft);
  color: var(--sp-red);
}

html[data-bs-theme] .fleet-input {
  border: 1px solid var(--sp-line2);
  border-radius: 9px;
  background-color: var(--sp-field);
  color: var(--sp-text);
}

html[data-bs-theme] .fleet-input::placeholder {
  color: var(--sp-faint);
}

html[data-bs-theme] .fleet-input:focus {
  border-color: var(--sp-accent);
  box-shadow: 0 0 0 .2rem var(--sp-accent-soft);
}

html[data-bs-theme] .fleet-search {
  color: var(--sp-muted);
  font-weight: 500;
}

/* The details panel is as narrow as Position's form: the vessel name gets the
   larger share, the voyage select the rest. */
html[data-bs-theme] .fleet-vessel-row {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 56px 68px;
  gap: 6px;
  /* With the row's padding: production's 54px per vessel. */
  margin-bottom: 4px;
  padding: 7px 8px;
  border-radius: 10px;
  background: var(--sp-panel2);
}

html[data-bs-theme] .fleet-vessel-name-tag {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sp-text);
  font-size: 12px;
  font-weight: 600;
}

html[data-bs-theme] .fleet-itinerary-select.fleet-input {
  padding-right: 28px;
  padding-left: 10px;
  background-position: right 10px center;
}

html[data-bs-theme] .fleet-vessel-row .fleet-btn:not(.fleet-btn--danger):not([data-current-itinerary=""]) {
  border-color: var(--sp-faint);
}

html[data-bs-theme] .fleet-btn {
  border: 1px solid var(--sp-line2);
  border-radius: 8px;
  background: transparent;
  color: var(--sp-text);
  font-weight: 500;
}

html[data-bs-theme] .fleet-btn:hover {
  border-color: var(--sp-muted);
  background: var(--sp-panel2);
  color: var(--sp-text);
}

html[data-bs-theme] .fleet-link-btn[data-current-itinerary=""] {
  border-color: var(--sp-accent);
  color: var(--sp-accent-text);
  font-weight: 600;
}

html[data-bs-theme] .fleet-link-btn[data-current-itinerary=""]:hover {
  border-color: var(--sp-accent);
  background: var(--sp-accent-soft);
  color: var(--sp-accent-text);
}

html[data-bs-theme] .fleet-btn.fleet-btn--danger {
  border-color: var(--sp-red);
  background: transparent;
  color: var(--sp-red);
}

html[data-bs-theme] .fleet-btn.fleet-btn--danger:hover {
  background: var(--sp-red-soft);
  color: var(--sp-red);
}

html[data-bs-theme] .fleet-export-toolbar {
  background: transparent;
}

html[data-bs-theme="dark"] body {
  --fleet-dt-normal-row-bg: var(--sp-panel);
  --fleet-dt-normal-row-hover: var(--sp-panel2);
}

html[data-bs-theme] .fleet-table td,
html[data-bs-theme] .fleet-table th {
  color: var(--sp-text);
}

html[data-bs-theme] .fleet-table thead th {
  color: var(--sp-muted);
}

html[data-bs-theme] .fleet-badge.fleet-badge:not(.leaflet-container *) {
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent !important;
  font-weight: 600;
}

html[data-bs-theme] .fleet-badge.is-on-time:not(.leaflet-container *) {
  color: var(--sp-green) !important;
}

html[data-bs-theme] .fleet-badge.is-late:not(.leaflet-container *) {
  color: var(--sp-red) !important;
}

html[data-bs-theme] .fleet-badge.is-heavy-weather:not(.leaflet-container *) {
  color: #e9b949 !important;
}

html[data-bs-theme] .fleet-badge.is-unknown:not(.leaflet-container *) {
  color: var(--sp-muted) !important;
}

html[data-bs-theme] .fleet-table-voyage {
  border: 1px solid var(--sp-line2);
  border-radius: 7px;
  /* 28px tall with the border, as on production. */
  line-height: 26px;
  background: transparent;
  color: var(--sp-text);
  font-weight: 500;
}

html[data-bs-theme] .fleet-table-voyage:hover {
  border-color: var(--sp-muted);
  background: var(--sp-panel2);
  color: var(--sp-text);
}

html[data-bs-theme] .fleet-table-remove {
  border: 1px solid var(--sp-red);
  border-radius: 7px;
  background: transparent;
  color: var(--sp-red);
  font-weight: 500;
}

html[data-bs-theme] .fleet-table-remove:hover {
  background: var(--sp-red-soft);
}

/* Fleet and Fleet ETAs on the pages' background, as Position and Voyage
   (fleet.css paints them #303842); the table area on its panel's colour. */
html[data-bs-theme] #fleet-app,
html[data-bs-theme] .fleet-page,
html[data-bs-theme] #fleet-etas-app,
html[data-bs-theme] .fleet-etas-page {
  background: var(--sp-bg);
  color: var(--sp-text);
}

html[data-bs-theme] .fleet-table-wrap {
  background: transparent;
}

html[data-bs-theme] .fleet-etas-summary {
  border-bottom-color: var(--sp-line);
  color: var(--sp-muted);
}

html[data-bs-theme] .fleet-etas-chart {
  background: transparent;
  color: var(--sp-text);
}

html[data-bs-theme] .fleet-etas-vessel strong {
  color: var(--sp-text);
}

/* Fleet layout, as in the mockup (the map and its legend untouched). */
html[data-bs-theme] #fleet-create-btn {
  --ct-btn-color: var(--sp-accent-text);
  --ct-btn-border-color: var(--sp-accent);
  --ct-btn-hover-color: var(--sp-accent-text);
  --ct-btn-hover-bg: var(--sp-accent-soft);
  --ct-btn-hover-border-color: var(--sp-accent);
  font-weight: 600;
}

html[data-bs-theme] .fleet-list-item__select {
  gap: 12px;
  padding-left: 12px;
}

html[data-bs-theme] .fleet-list-item__select::before {
  content: "";
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--sp-line2);
  border-radius: 10px;
  background: var(--sp-panel2) center / 18px 18px no-repeat url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b99aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 20a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2-1a2.4 2.4 0 0 1 2-1a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2-1a2.4 2.4 0 0 1 2-1a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2-1'/%3e%3cpath d='M4 18l-1-5h18l-2 4'/%3e%3cpath d='M5 13v-6h8l4 6'/%3e%3cpath d='M7 7v-4h-1'/%3e%3c/svg%3e");
}

html[data-bs-theme] .fleet-list-item.is-active .fleet-list-item__select::before {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0af6c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 20a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2-1a2.4 2.4 0 0 1 2-1a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2-1a2.4 2.4 0 0 1 2-1a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2-1'/%3e%3cpath d='M4 18l-1-5h18l-2 4'/%3e%3cpath d='M5 13v-6h8l4 6'/%3e%3cpath d='M7 7v-4h-1'/%3e%3c/svg%3e");
}

html[data-bs-theme] .fleet-detail > .fleet-panel__header {
  border-bottom: 1px solid var(--sp-line);
}

/* Field and row heights keep the details panel at its original height, so the map keeps its size. */
html[data-bs-theme] .fleet-form .fleet-input,
html[data-bs-theme] #fleet-save-name-btn,
html[data-bs-theme] #fleet-add-ship-btn {
  min-height: 38px;
}

html[data-bs-theme] #fleet-add-imo {
  padding-left: 36px;
  background: var(--sp-field) 12px center / 16px 16px no-repeat url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6d7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='10' cy='10' r='7'/%3e%3cpath d='M21 21l-6-6'/%3e%3c/svg%3e");
}

html[data-bs-theme] .fleet-vessel-row .fleet-itinerary-select {
  min-height: 34px;
}

html[data-bs-theme] .fleet-vessel-row .fleet-btn {
  min-height: 30px;
  font-size: 12px;
}

/* Fleet vessels | Fleet ETAs as one switch. Header, toolbar and table keep
   production's sizes and places. */
html[data-bs-theme] .fleet-bottom > .fleet-panel__header {
  border-bottom: 1px solid var(--sp-line);
}

html[data-bs-theme] .fleet-bottom .fleet-panel__title-actions {
  gap: 4px;
  padding: 2px;
  border: 1px solid var(--sp-line);
  border-radius: 10px;
  background: var(--sp-panel2);
}

html[data-bs-theme] .fleet-bottom .fleet-panel__title-actions h2 {
  padding: 3px 12px;
  border-radius: 7px;
  background: var(--sp-accent);
  color: var(--sp-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

html[data-bs-theme] .fleet-bottom .fleet-panel__title-actions #fleet-etas-btn {
  min-height: 0;
  padding: 3px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--sp-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

html[data-bs-theme] .fleet-bottom .fleet-panel__title-actions #fleet-etas-btn:hover {
  background: var(--sp-panel);
  color: var(--sp-text);
}

html[data-bs-theme] .fleet-bottom .fleet-panel__title-actions #fleet-etas-btn i {
  display: none;
}

html[data-bs-theme] .fleet-bottom div.dt-buttons {
  display: inline-flex;
  /* In place of the buttons' bottom margin: the toolbar keeps production's height. */
  margin-bottom: 4px;
  overflow: hidden;
  border: 1px solid var(--sp-line2);
  border-radius: 9px;
}

html[data-bs-theme] body .fleet-bottom div.dt-buttons > .dt-button {
  height: 33px;
  margin: 0;
  padding: 0 14px;
  border: 0 !important;
  border-radius: 0 !important;
}

html[data-bs-theme] body .fleet-bottom div.dt-buttons > .dt-button + .dt-button {
  border-left: 1px solid var(--sp-line2) !important;
}

/* Fleet table: names and ports in bold, dates and numbers in mono, row lines. */
html[data-bs-theme] #fleet-vessels-table_wrapper table#fleet-vessels-table.dataTable tbody tr:not(.child) > td {
  border-bottom: 1px solid var(--sp-line) !important;
  /* The line takes 1px of the padding: rows keep production's height. */
  padding-bottom: 7px;
}

html[data-bs-theme] #fleet-vessels-table tbody td:nth-child(1),
html[data-bs-theme] #fleet-vessels-table tbody td:nth-child(4) {
  font-weight: 600;
}

html[data-bs-theme] #fleet-vessels-table tbody td:nth-child(2),
html[data-bs-theme] #fleet-vessels-table tbody td:nth-child(3) {
  color: var(--sp-muted);
}

html[data-bs-theme] #fleet-vessels-table tbody td:nth-child(3),
html[data-bs-theme] #fleet-vessels-table tbody td:nth-child(5),
html[data-bs-theme] #fleet-vessels-table tbody td:nth-child(6),
html[data-bs-theme] #fleet-vessels-table tbody td:nth-child(7) {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .92em;
}

html[data-bs-theme] #fleet-vessels-table tbody td:nth-child(6),
html[data-bs-theme] #fleet-vessels-table tbody td:nth-child(7),
html[data-bs-theme] #fleet-vessels-table_wrapper .dataTables_scrollHead th:nth-child(6),
html[data-bs-theme] #fleet-vessels-table_wrapper .dataTables_scrollHead th:nth-child(7) {
  text-align: right;
}

html[data-bs-theme] #fleet-vessels-table_wrapper .dataTables_info {
  color: var(--sp-muted);
  font-weight: 500;
}


/* ------------------------------------------------------------ header, as in the mockup */
html[data-bs-theme] .navbar-custom .topbar-menu {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--sp-line);
}

html[data-bs-theme] .navbar-custom .topbar-menu > li.dropdown {
  padding-left: 12px;
  border-left: 1px solid var(--sp-line);
}

/* ------------------------------------------------------------ Position: form */
html[data-bs-theme] #node-position-list-form input[type="number"],
html[data-bs-theme] #node-position-list-form input[type="date"],
html[data-bs-theme] #node-position-list-form input[type="time"] {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

html[data-bs-theme] #edit-field-port-wrapper .chosen-choices li.search-choice {
  border: 1px solid var(--sp-line2) !important;
  border-radius: 6px !important;
  background: var(--sp-panel2) !important;
  box-shadow: none !important;
  color: var(--sp-text) !important;
  font-weight: 600;
}

html[data-bs-theme] #node-position-list-form .avoid-area-open-btn {
  border-style: dashed !important;
}

html[data-bs-theme] #node-position-list-form .avoid-area-count {
  border: 1px solid var(--sp-line2);
  border-radius: 5px;
  background: transparent !important;
  color: var(--sp-text) !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
}

/* Spacing kept tight so the form stays at its height and the map keeps its size. */
html[data-bs-theme] #node-position-list-form .position-list-row:has(#edit-field-search-shipowner-list-wrapper) {
  margin-top: 0;
  padding-top: 5px;
  border-top: 1px solid var(--sp-line);
}

html[data-bs-theme] #edit-field-search-shipowner-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

html[data-bs-theme] #edit-field-search-shipowner-list > .form-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  margin: 0 !important;
  padding: 1px 12px 1px 8px !important;
  border: 1px solid var(--sp-line2);
  border-radius: 10px;
}

html[data-bs-theme] #edit-field-search-shipowner-list > .form-check:has(.form-check-input:checked) {
  border-color: var(--sp-accent);
  background: var(--sp-panel2);
}

html[data-bs-theme] #edit-field-search-shipowner-list > .form-check > .form-check-input {
  float: none;
  margin: 0 !important;
}

html[data-bs-theme] #edit-field-search-shipowner-list > .form-check > .form-check-label {
  color: var(--sp-text);
  font-weight: 500;
}

html[data-bs-theme] #node-position-list-form fieldset.position-list-options {
  border: 1px solid var(--sp-line) !important;
  border-radius: 12px !important;
  background: var(--sp-panel2);
}

html[data-bs-theme] #node-position-list-form fieldset.position-list-options > legend {
  color: var(--sp-muted);
  font-weight: 500;
}

html[data-bs-theme] #node-position-list-form #edit-actions {
  display: flex;
  justify-content: flex-end;
}

html[data-bs-theme] #node-position-list-form #edit-submit {
  padding: 5px 18px;
  border-radius: 9px;
}

/* ------------------------------------------------------------ Position: KPI cards */
/* Production's cards, side by side; the day ranges as one group that fills the rest
   of the row. Each range shows its SUBS / RU counts beside the number and its bar
   (share of all vessels) in the bottom padding, so every card keeps production's
   height. */
html[data-bs-theme] #position-kpi-row {
  column-gap: 0;
}

html[data-bs-theme] #position-kpi-row .position-kpi-card:not(.is-bucket) {
  margin-right: 10px;
}

html[data-bs-theme] #position-kpi-row .position-kpi-card.is-bucket {
  flex: 1 1 0;
  min-width: max-content;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 12px;
  border-left-width: 0;
  border-radius: 0;
  background:
    linear-gradient(var(--sp-accent), var(--sp-accent)) left 0 bottom -6px / var(--sp-share, 0%) 3px no-repeat content-box padding-box,
    linear-gradient(var(--sp-line2), var(--sp-line2)) left 0 bottom -6px / 100% 3px no-repeat content-box padding-box,
    var(--sp-panel2);
}

html[data-bs-theme] #position-kpi-row .position-kpi-card:not(.is-bucket) + .position-kpi-card.is-bucket {
  border-left-width: 1px;
  border-radius: 12px 0 0 12px;
}

html[data-bs-theme] #position-kpi-row .position-kpi-card.is-bucket:last-child {
  border-radius: 0 12px 12px 0;
}

html[data-bs-theme] #position-kpi-row .position-kpi-card.is-bucket > .position-kpi-label {
  grid-column: 1 / -1;
}

html[data-bs-theme] #position-kpi-row .position-kpi-card.is-bucket > .position-kpi-breakdown {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

/* ------------------------------------------------------------ Position: table toolbar and rows */
html[data-bs-theme] body #datatable_wrapper .dt-buttons-container div.dt-buttons > .dt-button.buttons-html5 {
  margin-right: 0;
  border-radius: 0 !important;
}

html[data-bs-theme] body #datatable_wrapper .dt-buttons-container div.dt-buttons > .dt-button.buttons-html5:first-child {
  border-radius: 8px 0 0 8px !important;
}

html[data-bs-theme] body #datatable_wrapper .dt-buttons-container div.dt-buttons > .dt-button.buttons-html5 + .dt-button.buttons-html5 {
  border-left-width: 0 !important;
}

html[data-bs-theme] body #datatable_wrapper .dt-buttons-container div.dt-buttons > .dt-button.buttons-html5:not(:has(+ .dt-button.buttons-html5)) {
  margin-right: 8px;
  border-radius: 0 8px 8px 0 !important;
}

html[data-bs-theme] #datatable_filter label,
html[data-bs-theme] #fleet-vessels-table_filter label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  margin: 0;
  padding: 0 10px 0 34px;
  border: 1px solid var(--sp-line2);
  border-radius: 9px;
  background: var(--sp-field) 12px center / 15px 15px no-repeat url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b99aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='10' cy='10' r='7'/%3e%3cpath d='M21 21l-6-6'/%3e%3c/svg%3e");
  color: var(--sp-muted);
  font-size: 13px;
  font-weight: 500;
}

/* Production's width for the search ("Search:" and its field). */
html[data-bs-theme] #datatable_filter label {
  width: 226px;
}

/* Production's size for the search ("Search:" and its field). */
html[data-bs-theme] #fleet-vessels-table_filter label {
  width: 277px;
  height: 35px;
}

html[data-bs-theme] #datatable_filter input,
html[data-bs-theme] #fleet-vessels-table_filter input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sp-text);
  box-shadow: none;
  outline: none;
}

html[data-bs-theme] #datatable_filter label:focus-within,
html[data-bs-theme] #fleet-vessels-table_filter label:focus-within {
  border-color: var(--sp-accent);
}

html[data-bs-theme] body #datatable_wrapper .position-full-page-btn::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 6px;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 8V4h4M20 8V4h-4M4 16v4h4M20 16v4h-4'/%3e%3c/svg%3e") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 8V4h4M20 8V4h-4M4 16v4h4M20 16v4h-4'/%3e%3c/svg%3e") center / contain no-repeat;
}

html[data-bs-theme] table#datatable.dataTable tbody tr > td {
  border-bottom: 1px solid var(--sp-line) !important;
}

html[data-bs-theme] table#datatable.dataTable tbody tr > td:nth-child(2) {
  font-weight: 600;
}

html[data-bs-theme] table#datatable.dataTable tbody tr:not(.ru-row):not(.subs-row) > td:nth-child(17) {
  color: var(--sp-muted);
}

/* Vessels with Russian history (RU): an indigo tint with a bar at the start of the
   row instead of the solid grey (map_table_v2.css); text as on the other rows
   (red on SUBS rows). */
html[data-bs-theme] table#datatable.dataTable tbody tr.ru-row {
  /* The row has the tint too, so no thin dark seams show between the cells. */
  background-color: var(--sp-ru-row) !important;
}

html[data-bs-theme] table#datatable.dataTable tbody tr.ru-row > td {
  --ru-row-bg: var(--sp-ru-row);
}

html[data-bs-theme] table#datatable.dataTable tbody tr.ru-row:hover {
  background-color: var(--sp-ru-row-hover) !important;
}

html[data-bs-theme] table#datatable.dataTable tbody tr.ru-row:hover > td {
  --ru-row-bg: var(--sp-ru-row-hover);
}

html[data-bs-theme] table#datatable.dataTable tbody tr.ru-row:not(.subs-row) > td {
  color: var(--sp-text) !important;
}

html[data-bs-theme] table#datatable.dataTable tbody tr.ru-row > td:first-child {
  box-shadow: inset 4px 0 0 var(--sp-ru), inset 0 0 0 9999px var(--ru-row-bg) !important;
}

/* ------------------------------------------------------------ Voyage */
html[data-bs-theme] #itinerary-list .itinerary-list-item__content {
  min-width: 0;
}

html[data-bs-theme] .itin-port-row {
  border-color: var(--sp-line) !important;
  border-radius: 12px !important;
  background: var(--sp-panel2);
}

html[data-bs-theme] #detail-ship-speed,
html[data-bs-theme] .itin-port-row input[type="number"],
html[data-bs-theme] #itinerary-detail input[type="date"],
html[data-bs-theme] #itinerary-detail input[type="time"] {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

html[data-bs-theme] .card:has(> .card-body > #itinerary-eta) {
  position: relative;
}

/* The header keeps production's height. */
html[data-bs-theme] .card:has(> .card-body > #itinerary-eta) > .card-header {
  display: flex;
  align-items: center;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.36;
}

html[data-bs-theme] #itinerary-eta .itinerary-eta-comment {
  /* The box's padding and border come out of the gap below it, so the
     scenarios start where they do on production. */
  margin-bottom: -8px !important;
  padding: 3px 10px;
  border: 1px solid var(--sp-line);
  border-radius: 10px;
  background: var(--sp-panel2);
  font-size: .95rem !important;
  font-weight: 500 !important;
}

/* Each scenario keeps production's padding and spacing (map_table_v2.css);
   the Distance table left of them is a card of the same kind. */
html[data-bs-theme] #itinerary-eta .eta-scenario-block,
html[data-bs-theme] #itinerary-eta .eta-distance-block {
  overflow: hidden;
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  background: var(--sp-panel2);
  box-shadow: none;
}

html[data-bs-theme] #itinerary-eta .eta-scenario-title {
  display: flex;
  align-items: center;
  gap: 10px;
  /* As tall as production's title with its 4px underline. */
  min-height: 1.9rem;
  border-bottom: 1px solid var(--sp-line);
  font-size: 1.05rem !important;
  font-weight: 600;
}

html[data-bs-theme] #itinerary-eta .eta-scenario-title::before {
  content: "";
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sp-accent);
}

html[data-bs-theme] #itinerary-eta .eta-scenario-table th,
html[data-bs-theme] #itinerary-eta .eta-scenario-table td {
  font-size: .9rem !important;
}

html[data-bs-theme] #itinerary-eta .eta-scenario-table thead th {
  border-bottom: 1px solid var(--sp-line);
  color: var(--sp-muted);
  font-weight: 500;
}

html[data-bs-theme] #itinerary-eta .eta-scenario-table tbody td {
  border-top: 1px solid var(--sp-line);
}

html[data-bs-theme] #itinerary-eta .eta-scenario-table tbody td:nth-child(1),
html[data-bs-theme] #itinerary-eta .eta-scenario-table tbody td:nth-child(3) {
  font-weight: 600;
}

html[data-bs-theme] #itinerary-eta .eta-scenario-table tbody td:nth-child(2),
html[data-bs-theme] #itinerary-eta .eta-scenario-table tbody td:nth-child(5) {
  color: var(--sp-muted);
}

html[data-bs-theme] #itinerary-eta .eta-distance-table tbody td:first-child {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
}

/* A scenario's leg comments, under its table: the route, then the comment. */
html[data-bs-theme] #itinerary-eta .eta-scenario-comments {
  margin: 0;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--sp-line);
  border-radius: 0;
  background: transparent;
  font-size: .925rem;
}

html[data-bs-theme] #itinerary-eta .eta-scenario-comments li + li {
  margin-top: 8px;
}

html[data-bs-theme] #itinerary-eta .eta-comments-where {
  display: block;
  margin: 0;
  color: var(--sp-muted);
  font-size: .82rem;
  font-weight: 500;
}

/* ------------------------------------------------------------ AI Coworker welcome, as in the mockup */
html[data-bs-theme] .ai-coworker-title .sp-name {
  color: var(--sp-accent);
}

/* The message box is as tall as production's message field with Chat history below it. */
html[data-bs-theme] .ai-coworker-shell.is-empty .ai-coworker-composer {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 12px 14px 10px 16px;
  border: 1px solid var(--sp-line2);
  border-radius: 18px;
  background: var(--sp-panel);
}

html[data-bs-theme] .ai-coworker-shell.is-empty .ai-coworker-composer:focus-within {
  border-color: var(--sp-accent);
}

html[data-bs-theme] .ai-coworker-shell.is-empty .ai-coworker-form {
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

html[data-bs-theme] .ai-coworker-shell.is-empty .ai-coworker-input {
  min-height: 57px;
  padding: 4px 4px 0;
}

html[data-bs-theme] .ai-coworker-shell.is-empty .ai-coworker-send {
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 36px;
  min-width: 36px;
  height: 36px;
  border-radius: 10px;
}

html[data-bs-theme] .ai-coworker-shell.is-empty .ai-coworker-history-row {
  max-width: none;
  margin: 8px 0 0;
  min-height: 36px;
  align-items: center;
}

html[data-bs-theme] .ai-coworker-shell.is-empty .ai-coworker-history-inline-btn {
  min-width: 0;
  height: 32px;
  padding: 0 14px;
}

/* ------------------------------------------------------------ Fleet: long fleet names wrap */
html[data-bs-theme] .fleet-list-item__body strong {
  white-space: normal;
}

/* ============================================================ popups, in the pages' style */

/* Main action of each popup in gold. */
html[data-bs-theme] #position-pdf-export-confirm,
html[data-bs-theme] #fleet-pdf-export-confirm,
html[data-bs-theme] #company-entry-save,
html[data-bs-theme] #company-comment-send,
html[data-bs-theme] #fleet-create-confirm,
html[data-bs-theme] #confirm-position-list-btn,
html[data-bs-theme] #bs-example-modal-lg .ship-search-inline-actions .open-details {
  --ct-btn-color: var(--sp-ink);
  --ct-btn-bg: var(--sp-accent);
  --ct-btn-border-color: var(--sp-accent);
  --ct-btn-hover-color: var(--sp-ink);
  --ct-btn-hover-bg: var(--sp-accent-hover);
  --ct-btn-hover-border-color: var(--sp-accent-hover);
  --ct-btn-active-color: var(--sp-ink);
  --ct-btn-active-bg: var(--sp-accent-hover);
  --ct-btn-active-border-color: var(--sp-accent-hover);
  font-weight: 600;
}

/* "+ New" in My company data: gold outline, as on the pages. */
html[data-bs-theme] #raw-company-data-modal .raw-company-data-add-btn {
  --ct-btn-color: var(--sp-accent-text);
  --ct-btn-border-color: var(--sp-accent);
  --ct-btn-hover-color: var(--sp-accent-text);
  --ct-btn-hover-bg: var(--sp-accent-soft);
  --ct-btn-hover-border-color: var(--sp-accent);
  font-weight: 600;
}

/* Close and Cancel: plain outline (they were gold outlines). */
html[data-bs-theme] .btn-outline-warning:not(.leaflet-container *) {
  --ct-btn-color: var(--sp-text);
  --ct-btn-bg: transparent;
  --ct-btn-border-color: var(--sp-line2);
  --ct-btn-hover-color: var(--sp-text);
  --ct-btn-hover-bg: var(--sp-panel2);
  --ct-btn-hover-border-color: var(--sp-muted);
  --ct-btn-active-color: var(--sp-text);
  --ct-btn-active-bg: var(--sp-panel2);
  --ct-btn-active-border-color: var(--sp-muted);
  box-shadow: none;
}

/* Confirming a deletion: solid red. */
html[data-bs-theme] #pl-delete-confirm {
  --ct-btn-color: #fff;
  --ct-btn-bg: var(--sp-red);
  --ct-btn-border-color: var(--sp-red);
  --ct-btn-hover-color: #fff;
  --ct-btn-hover-bg: #ff8496;
  --ct-btn-hover-border-color: #ff8496;
  font-weight: 600;
}

html[data-bs-theme] .modal-footer {
  gap: 8px;
}

/* The gap spaces the buttons; their top and bottom margins stay, so footers keep production's height. */
html[data-bs-theme] .modal-footer > * {
  margin-right: 0;
  margin-left: 0;
}

html[data-bs-theme] .modal input[type="date"],
html[data-bs-theme] .modal input[type="time"],
html[data-bs-theme] .modal input[type="number"] {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

html[data-bs-theme] .modal input[type="file"]::file-selector-button {
  margin-right: 12px;
  border: 0;
  border-right: 1px solid var(--sp-line2);
  background: var(--sp-panel2);
  color: var(--sp-text);
  font-weight: 500;
}

html[data-bs-theme] .modal .alert-info {
  border: 1px solid var(--sp-line);
  border-radius: 10px;
  background: var(--sp-panel2);
  color: var(--sp-muted);
}

html[data-bs-theme] .modal .badge.text-bg-success,
html[data-bs-theme] .modal .badge.text-bg-danger,
html[data-bs-theme] .modal .badge.text-bg-warning {
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent !important;
  font-weight: 600;
}

html[data-bs-theme] .modal .badge.text-bg-success {
  color: var(--sp-green) !important;
}

html[data-bs-theme] .modal .badge.text-bg-danger {
  color: var(--sp-red) !important;
}

html[data-bs-theme] .modal .badge.text-bg-warning {
  color: #e9b949 !important;
}

/* Tables in popups: no stripes or vertical borders, a line under each row. */
html[data-bs-theme] .modal .table:not(#datatable):not(.leaflet-container *) > :not(caption) > tr > *,
html[data-bs-theme] .modal .table:not(#datatable):not(.leaflet-container *) > :not(caption) > * > * {
  border-right-width: 0 !important;
  border-left-width: 0 !important;
}

/* Each table keeps production's border widths (so its rows keep their height) and the
   line is drawn inside the cell. */
html[data-bs-theme] .modal .table:not(#datatable):not(.leaflet-container *) > tbody > tr > td {
  --ct-table-bg-type: transparent;
  border-top-width: 0 !important;
  border-bottom-color: transparent !important;
  box-shadow: inset 0 -1px 0 var(--sp-line), inset 0 0 0 9999px var(--ct-table-bg-state, var(--ct-table-bg-type, var(--ct-table-accent-bg)));
}

html[data-bs-theme] .modal .table:not(#datatable):not(.leaflet-container *) > thead > tr > th {
  border-top-width: 0 !important;
  border-bottom: 1px solid var(--sp-line) !important;
  background: var(--sp-panel2);
  color: var(--sp-muted);
  font-weight: 500;
}

html[data-bs-theme] .modal .table-bordered:not(.leaflet-container *) {
  border: 0 !important;
}

html[data-bs-theme] .modal .table:not(.leaflet-container *) > tbody {
  border-top: 0 !important;
}

/* Autocomplete lists (ship search, ports, IMO / vessel). */
html[data-bs-theme] body #bs-example-modal-lg .ship-search-suggestions,
html[data-bs-theme] .itin-imo-results,
html[data-bs-theme] .itin-port-results,
html[data-bs-theme] .position-itin-port-results,
html[data-bs-theme] .fleet-imo-results {
  border: 1px solid var(--sp-line2) !important;
  border-radius: 10px !important;
  background: var(--sp-panel2) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .4) !important;
  color: var(--sp-text) !important;
}

html[data-bs-theme] body #bs-example-modal-lg .ship-search-suggestion:hover,
html[data-bs-theme] body #bs-example-modal-lg .ship-search-suggestion.is-active,
html[data-bs-theme] body :is(.itin-imo-results, .itin-port-results, .position-itin-port-results, .fleet-imo-results) > :not([class*="empty"]):hover,
html[data-bs-theme] body :is(.itin-imo-results, .itin-port-results, .position-itin-port-results, .fleet-imo-results) > .is-active {
  background: var(--sp-field) !important;
  box-shadow: inset 3px 0 0 var(--sp-accent);
  color: var(--sp-text) !important;
}

/* Loading cards: panel and gold spinner. */
html[data-bs-theme] #save-update-blocker .save-update-card,
html[data-bs-theme] #fleet-action-loading-overlay .fleet-action-loading-card {
  border: 1px solid var(--sp-line2) !important;
  border-radius: 14px !important;
  background: var(--sp-panel) !important;
  color: var(--sp-text) !important;
}

html[data-bs-theme] .spinner-border.text-primary:not(.leaflet-container *) {
  color: var(--sp-accent) !important;
}

/* Search ship */
html[data-bs-theme] #bs-example-modal-lg .ship-search-already-added {
  padding: 3px 8px;
  border: 1px solid var(--sp-green);
  border-radius: 6px;
  color: var(--sp-green) !important;
}

/* New position list: the same form as the Position page. */
html[data-bs-theme] #position-list-create-form--modal fieldset[id^="edit-field-search-shipowner-list"] > .fieldset-wrapper > .checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

html[data-bs-theme] #position-list-create-form--modal fieldset[id^="edit-field-search-shipowner-list"] > .fieldset-wrapper > .checkbox > .form-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  margin: 0 !important;
  /* Chip as tall as the switch row it replaces. */
  padding: 1px 12px 1px 8px !important;
  border: 1px solid var(--sp-line2);
  border-radius: 10px;
}

html[data-bs-theme] #position-list-create-form--modal fieldset[id^="edit-field-search-shipowner-list"] > .fieldset-wrapper > .checkbox > .form-check:has(.form-check-input:checked) {
  border-color: var(--sp-accent);
  background: var(--sp-panel2);
}

html[data-bs-theme] #position-list-create-form--modal fieldset[id^="edit-field-search-shipowner-list"] > .fieldset-wrapper > .checkbox > .form-check > .form-check-input {
  float: none;
  margin: 0 !important;
}

html[data-bs-theme] #position-list-create-form--modal fieldset[id^="edit-field-search-shipowner-list"] > .fieldset-wrapper > .checkbox > .form-check > .form-check-label {
  color: var(--sp-text);
  font-weight: 500;
}

html[data-bs-theme] #position-list-create-form--modal fieldset.position-list-options {
  border: 1px solid var(--sp-line) !important;
  border-radius: 12px !important;
  background: var(--sp-panel2);
}

html[data-bs-theme] #position-list-create-form--modal .chosen-choices li.search-choice {
  border: 1px solid var(--sp-line2) !important;
  border-radius: 6px !important;
  background: var(--sp-panel2) !important;
  box-shadow: none !important;
  color: var(--sp-text) !important;
  font-weight: 600;
}

html[data-bs-theme] #position-list-create-form--modal .avoid-area-open-btn {
  border-style: dashed !important;
}

html[data-bs-theme] #position-list-create-form--modal .avoid-area-count {
  border: 1px solid var(--sp-line2);
  border-radius: 5px;
  background: transparent !important;
  color: var(--sp-text) !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

html[data-bs-theme] #position-list-create-form--modal .form-actions {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: 8px;
}

html[data-bs-theme] #position-list-create-form--modal .form-actions > * {
  margin: 0 !important;
}

/* Exclude search area */
html[data-bs-theme] .avoid-area-modal .avoid-area-modal-inner {
  border: 1px solid var(--sp-line) !important;
  border-radius: 14px !important;
  background: var(--sp-panel) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35) !important;
  color: var(--sp-text) !important;
}

html[data-bs-theme] .avoid-area-modal .avoid-area-modal-header,
html[data-bs-theme] .avoid-area-modal .avoid-area-modal-footer {
  border-color: var(--sp-line) !important;
}

html[data-bs-theme] .avoid-area-modal .avoid-area-modal-title {
  font-weight: 600;
}

html[data-bs-theme="dark"] .avoid-area-modal .avoid-area-list-panel {
  color-scheme: dark;
}

html[data-bs-theme] .avoid-area-modal .avoid-area-list-panel input[type="checkbox"] {
  accent-color: var(--sp-accent);
}

html[data-bs-theme] .avoid-area-modal .avoid-area-list-panel .avoid-area-option {
  /* Production's row height. */
  padding: 2.4px 8px !important;
  border-radius: 7px;
}

html[data-bs-theme] .avoid-area-modal .avoid-area-list-panel .avoid-area-option:hover {
  background: var(--sp-panel2);
}

html[data-bs-theme] .avoid-area-modal .avoid-area-list-panel .avoid-area-option:has(input:checked) {
  background: var(--sp-accent-soft);
}

/* Select position list: each list as a row to pick, 34px apart as on production. */
html[data-bs-theme] #position-list-options > .form-check {
  margin: 0 0 4px !important;
  padding: 3px 12px 3px 38px;
  border: 1px solid var(--sp-line);
  border-radius: 10px;
}

html[data-bs-theme] #position-list-options > .form-check:hover {
  background: var(--sp-panel2);
}

html[data-bs-theme] #position-list-options > .form-check:has(.form-check-input:checked) {
  border-color: var(--sp-accent);
  background: var(--sp-field);
}

html[data-bs-theme] #position-list-options > .form-check > .form-check-label {
  color: var(--sp-text);
  font-weight: 600;
}

/* Vessel details */
html[data-bs-theme] #fullscreenVesselModal .bg-light .d-flex.flex-wrap .fw-semibold {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500 !important;
}

html[data-bs-theme] #fullscreenVesselModal .bg-light img {
  border-radius: 10px;
}

html[data-bs-theme] body #fullscreenVesselModalBody #details-table tbody tr td:first-child,
html[data-bs-theme] body #fullscreenVesselModalBody #details-table tbody tr td:first-child strong {
  color: var(--sp-muted) !important;
  font-weight: 500 !important;
}

html[data-bs-theme] body #fullscreenVesselModalBody #details-table tbody tr td:last-child {
  color: var(--sp-text) !important;
}

html[data-bs-theme] #fullscreenVesselModal #portcalls-table td:nth-child(1),
html[data-bs-theme] #fullscreenVesselModal #portcalls-table td:nth-child(3) {
  font-weight: 600;
}

html[data-bs-theme] #fullscreenVesselModal #portcalls-table td:nth-child(2),
html[data-bs-theme] #fullscreenVesselModal #portcalls-table td:nth-child(4),
html[data-bs-theme] #fullscreenVesselModal #fixtures-table td:nth-child(1),
html[data-bs-theme] #fullscreenVesselModal #fixtures-table td:nth-child(3) {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .92em;
}

html[data-bs-theme] #fullscreenVesselModal #portcalls-table td:nth-child(2),
html[data-bs-theme] #fullscreenVesselModal #portcalls-table td:nth-child(4) {
  color: var(--sp-muted);
}

/* Sanction report: each part as a labelled row, in production's spacing (the line sits
   in the 24px between parts; the label fills its own line, before the line break). */
html[data-bs-theme] #sanctionsModal .modal-body > div:not(:last-child) {
  margin-bottom: 12px !important;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--sp-line);
}

html[data-bs-theme] #sanctionsModal .modal-body > div > strong {
  display: inline-block;
  width: 100%;
  color: var(--sp-muted);
  font-size: .82rem;
  font-weight: 500;
}

html[data-bs-theme] #sanctionsModal .modal-body > div > em {
  color: var(--sp-text);
  font-style: normal;
}

/* Deleted vessels */
html[data-bs-theme] #deleted-position-vessels-modal tbody td:nth-child(1) {
  font-weight: 600;
}

html[data-bs-theme] #deleted-position-vessels-modal tbody td:nth-child(2),
html[data-bs-theme] #deleted-position-vessels-modal tbody td:nth-child(4),
html[data-bs-theme] #deleted-position-vessels-modal tbody td:nth-child(6) {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .92em;
}

/* My company data */
html[data-bs-theme] #raw-company-data-search,
html[data-bs-theme] #fleet-create-vessel-search {
  padding-left: 36px;
  background: var(--sp-field) 12px center / 15px 15px no-repeat url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b99aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='10' cy='10' r='7'/%3e%3cpath d='M21 21l-6-6'/%3e%3c/svg%3e");
}

html[data-bs-theme] #raw-company-data-table tbody td:first-child {
  font-weight: 600;
}

html[data-bs-theme] #raw-company-data-table tbody td:nth-child(3),
html[data-bs-theme] #raw-company-data-table tbody td:nth-child(4) {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .92em;
}

html[data-bs-theme] #raw-company-data-table tbody td.company-col-date-reported {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .92em;
}

/* Edit position entry */
html[data-bs-theme] #company-data-entry-modal .company-entry-map-panel {
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  background: var(--sp-panel2);
}

html[data-bs-theme] #company-data-entry-modal .company-entry-map-heading {
  color: var(--sp-text);
  font-weight: 600;
}

/* Create voyage: the port being edited gets a gold edge. */
html[data-bs-theme] #itinerary-create-modal .itin-port-row:is(:hover, :focus-within, .is-port-active) {
  border-color: rgba(224, 175, 108, .55) !important;
  background: var(--sp-panel2) !important;
  box-shadow: 0 0 0 1px rgba(224, 175, 108, .2) !important;
}

/* Create fleet */
html[data-bs-theme] .fleet-create-selected-vessel {
  border: 1px solid var(--sp-line);
  border-radius: 10px;
  background: var(--sp-panel2);
  color: var(--sp-text);
}

html[data-bs-theme] .fleet-create-selected-empty {
  border: 1px dashed var(--sp-line2);
  border-radius: 10px;
  background: transparent;
  color: var(--sp-muted);
}

/* Fleet ETAs: the status colours of the pages. */
html[data-bs-theme] .fleet-etas-bar.is-on-time,
html[data-bs-theme] .fleet-etas-legend i.is-on-time {
  background: var(--sp-green);
  color: var(--sp-green);
}

html[data-bs-theme] .fleet-etas-bar.is-late,
html[data-bs-theme] .fleet-etas-legend i.is-late {
  background: var(--sp-red);
  color: var(--sp-red);
}

html[data-bs-theme] .fleet-etas-bar.is-unknown,
html[data-bs-theme] .fleet-etas-legend i.is-unknown {
  background: var(--sp-faint);
  color: var(--sp-faint);
}

html[data-bs-theme] .fleet-etas-destination strong {
  color: var(--sp-text);
}

html[data-bs-theme] .fleet-etas-destination span,
html[data-bs-theme] .fleet-etas-duration {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

/* Market evolution: cards and charts in the pages' colours. */
html[data-bs-theme] .position-time-machine-card,
html[data-bs-theme] .position-time-machine-chart-card,
html[data-bs-theme] .position-time-machine-open-subs-card,
html[data-bs-theme] .position-time-machine-setup-card,
html[data-bs-theme] .position-time-machine-empty {
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  background: var(--sp-panel2);
}

html[data-bs-theme] .position-time-machine-card span {
  color: var(--sp-muted);
}

html[data-bs-theme] .position-time-machine-card strong {
  color: var(--sp-text);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
}

html[data-bs-theme] .position-time-machine-summary > .position-time-machine-card:nth-child(2) strong {
  color: var(--sp-red);
}

html[data-bs-theme] .position-time-machine-swatch.is-0-5,
html[data-bs-theme] .position-time-machine-segment.is-0-5 {
  background: var(--sp-accent);
}

html[data-bs-theme] .position-time-machine-swatch.is-6-10,
html[data-bs-theme] .position-time-machine-segment.is-6-10 {
  background: #9c7748;
}

html[data-bs-theme] .position-time-machine-swatch.is-11-plus,
html[data-bs-theme] .position-time-machine-segment.is-11-plus {
  background: #3d4c5e;
}

html[data-bs-theme] .position-time-machine-swatch.is-on-subs-comparison,
html[data-bs-theme] .position-time-machine-open-subs-segment.is-on-subs-comparison {
  background: var(--sp-red);
}

html[data-bs-theme] .position-time-machine-swatch.is-open-total-comparison,
html[data-bs-theme] .position-time-machine-open-subs-segment.is-open-total-comparison {
  background: #2c3b4c;
}

html[data-bs-theme] .position-time-machine-segment.is-0-5 span,
html[data-bs-theme] .position-time-machine-open-subs-segment.is-on-subs-comparison span {
  color: var(--sp-ink);
}

html[data-bs-theme] .position-time-machine-segment.is-6-10 span,
html[data-bs-theme] .position-time-machine-segment.is-11-plus span,
html[data-bs-theme] .position-time-machine-open-subs-segment.is-open-total-comparison span {
  color: var(--sp-text);
}

html[data-bs-theme] .position-time-machine-total {
  color: var(--sp-text);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

html[data-bs-theme] .position-time-machine-label {
  color: var(--sp-muted);
}

html[data-bs-theme] .position-time-machine-table {
  color: var(--sp-text);
}

html[data-bs-theme] .position-time-machine-table td:not(:first-child) {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

html[data-bs-theme] .position-time-machine-table td:first-child {
  font-weight: 600;
}

/* ------------------------------------------------------------ login */
html[data-bs-theme] body.authentication-bg {
  min-height: 100vh;
  background: var(--sp-bg) !important;
}

body.authentication-bg::before {
  content: "";
  position: fixed;
  inset: 0 46% 0 0;
  z-index: 0;
  border-right: 1px solid var(--sp-line);
  background-color: #101922;
  background-image:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 900' preserveAspectRatio='xMidYMid slice'%3e%3cpath d='M120 760 C 260 640, 360 520, 430 420 S 560 220, 660 150' fill='none' stroke='%23e0af6c' stroke-width='3' stroke-dasharray='2 10' stroke-linecap='round' opacity='.8'/%3e%3cpath d='M90 300 C 230 330, 380 360, 520 470 S 700 640, 760 700' fill='none' stroke='%235aa2e6' stroke-width='3' stroke-dasharray='2 10' stroke-linecap='round' opacity='.6'/%3e%3ccircle cx='430' cy='420' r='130' fill='none' stroke='%23e0af6c' stroke-opacity='.18'/%3e%3ccircle cx='430' cy='420' r='230' fill='none' stroke='%23e0af6c' stroke-opacity='.1'/%3e%3ccircle cx='430' cy='420' r='7' fill='%23e0af6c'/%3e%3ccircle cx='430' cy='420' r='15' fill='none' stroke='%23e0af6c' stroke-opacity='.5'/%3e%3cg%3e%3cpath d='M0 -13 L9 9 L0 4 L-9 9 Z' transform='translate(260 640) rotate(40)' fill='%23e0af6c'/%3e%3cpath d='M0 -13 L9 9 L0 4 L-9 9 Z' transform='translate(560 240) rotate(50)' fill='%23e0af6c'/%3e%3cpath d='M0 -13 L9 9 L0 4 L-9 9 Z' transform='translate(330 340) rotate(100)' fill='%235aa2e6'/%3e%3cpath d='M0 -13 L9 9 L0 4 L-9 9 Z' transform='translate(640 610) rotate(130)' fill='%235aa2e6'/%3e%3cpath d='M0 -13 L9 9 L0 4 L-9 9 Z' transform='translate(180 470) rotate(300)' fill='%23e0af6c'/%3e%3cpath d='M0 -13 L9 9 L0 4 L-9 9 Z' transform='translate(520 520) rotate(210)' fill='%235aa2e6'/%3e%3cpath d='M0 -13 L9 9 L0 4 L-9 9 Z' transform='translate(700 380) rotate(20)' fill='%23e0af6c'/%3e%3c/g%3e%3c/svg%3e"),
    linear-gradient(#17222d 1px, transparent 1px),
    linear-gradient(90deg, #17222d 1px, transparent 1px);
  background-position: center, 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat;
  background-size: cover, 40px 40px, 40px 40px;
}

body.authentication-bg .position-absolute.start-0.end-0.bottom-0.w-100.h-100 {
  display: none;
}

body.authentication-bg .account-pages {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin-left: 54%;
  padding: 48px !important;
}

body.authentication-bg .account-pages .container {
  max-width: 420px;
  padding: 0;
}

body.authentication-bg .account-pages .row {
  display: block;
  margin: 0;
}

body.authentication-bg .account-pages .row > [class*="col"] {
  width: 100%;
  max-width: none;
  padding: 0;
}

body.authentication-bg .account-pages .card {
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.authentication-bg .account-pages .card-header {
  position: fixed;
  top: 40px;
  left: 44px;
  z-index: 2;
  padding: 0 !important;
  border: 0;
  background: transparent !important;
}

body.authentication-bg .account-pages .card-header img {
  height: 28px;
}

body.authentication-bg .account-pages .card-body {
  padding: 0 !important;
}

body.authentication-bg .account-pages .card-body > .text-center {
  width: 100% !important;
  margin: 0 0 22px !important;
  text-align: left !important;
}

body.authentication-bg .account-pages .page-title {
  margin: 0;
  color: var(--sp-text);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
}

body.authentication-bg form label {
  margin-bottom: 7px;
  font-size: 13px;
}

body.authentication-bg form .form-control {
  height: 46px;
  border-radius: 10px;
  font-size: 15px;
}

body.authentication-bg form .input-group > .form-control {
  border-radius: 10px 0 0 10px;
}

body.authentication-bg form .input-group > .input-group-text {
  border-radius: 0 10px 10px 0;
}

body.authentication-bg form small.description {
  display: block;
  margin-top: 8px;
  color: var(--sp-faint) !important;
  font-size: 12px;
}

body.authentication-bg form > a.float-end {
  margin-top: 0;
  color: var(--sp-accent-text) !important;
  font-size: 13px;
}

body.authentication-bg form .js-form-item {
  margin-bottom: 18px !important;
}

body.authentication-bg form .form-actions {
  margin-top: 24px;
}

body.authentication-bg form .form-submit {
  width: 100%;
  height: 46px;
  border-radius: 10px;
  font-size: 15px;
}

body.authentication-bg .footer.footer-alt {
  position: fixed;
  left: 54%;
  right: 0;
  bottom: 24px;
  z-index: 1;
  border: 0;
  color: var(--sp-faint);
  text-align: center;
}

@media (max-width: 900px) {
  body.authentication-bg::before {
    display: none;
  }

  body.authentication-bg .account-pages {
    margin-left: 0;
    padding: 32px 20px !important;
  }

  body.authentication-bg .account-pages .card-header {
    position: static;
    margin-bottom: 28px;
    text-align: left !important;
  }

  body.authentication-bg .footer.footer-alt {
    left: 0;
  }
}