/* Keep the shell from rubber-banding into a detached fixed-footer state. */
html,
body {
  overscroll-behavior-y: none;
}

/* App shell spacing: leave room for fixed bottom UI (nav / form footer) */
body {
  padding-bottom: calc(
    var(--fsm-bottom-nav-reserve, var(--mbs-bottom-nav-reserve, 0px)) +
      var(--fsm-form-footer-reserve, var(--mbs-form-footer-reserve, 0px)) +
      var(--fsm-bottom-inset, var(--mbs-bottom-inset, 0px))
  );
  background: var(--fsm-background, #ffffff);
  color: var(--fsm-foreground, #292524);
}

html {
  font-size: var(--fsm-root-font-size, var(--mbs-root-font-size, 16px));
  background: var(--fsm-background, #ffffff);
}

#app,
.fsm-shell-layout-desktop,
.mbs-shell-layout-desktop,
.fsm-shell-content-column,
.mbs-shell-content-column,
#shellMain {
  background: var(--fsm-background, #ffffff);
}

/* Prevent iOS Safari double-tap-to-zoom on common tap targets (pinch-zoom still allowed). */
a,
button,
input,
select,
textarea,
label,
[role="button"],
.nav-link,
.list-group-item {
  touch-action: manipulation;
}

body.fsm-overlay-open {
  overflow: hidden;
}

/* Dark-mode compatibility shim for pages still using the older
   `bg-white text-foreground` surface recipe. Keep the semantics coherent
   until every active page is fully migrated to shared foundation classes. */
.dark .bg-white.text-foreground {
  background-color: var(--fsm-card, #262626) !important;
  color: var(--fsm-foreground, #e5e5e5) !important;
}

.dark input.bg-white,
.dark textarea.bg-white,
.dark select.bg-white,
.dark button.bg-white.text-foreground,
.dark a.bg-white.text-foreground {
  background-color: var(--fsm-card, #262626) !important;
  color: var(--fsm-foreground, #e5e5e5) !important;
}

@media (pointer: coarse) {
  #app,
  #app * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  #app input,
  #app textarea,
  #app select,
  #app option,
  #app [contenteditable],
  #app [contenteditable="true"] {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
  }

  #app a,
  #app button,
  #app img,
  #app svg,
  #app canvas {
    -webkit-user-drag: none;
  }
}

/* ----------------------------
   Kilari light/dark theme (Bootstrap 5.3)
   - Uses Bootstrap's built-in [data-bs-theme="dark"] support.
   - We override core CSS variables to match Kilari brand colors.
----------------------------- */
:root {
  /* App tokens (not tied to Bootstrap) */
  --mbs-bottom-nav-reserve: 64px;
  --mbs-form-footer-reserve: 0px;
  --mbs-icon-size: 1.1rem;
  --mbs-desktop-sidebar-w: 12.75rem;
  /* Extra bottom inset for mobile system UI overlays (gesture bar / task switcher, etc.). */
  --mbs-system-bottom-inset: 0px;
  /* Combined inset used by fixed bottom UI + layout calculations. */
  --mbs-bottom-inset: calc(env(safe-area-inset-bottom, 0px) + var(--mbs-system-bottom-inset, 0px));
  --fsm-bottom-nav-reserve: var(--mbs-bottom-nav-reserve);
  --fsm-form-footer-reserve: var(--mbs-form-footer-reserve);
  --fsm-system-bottom-inset: var(--mbs-system-bottom-inset);
  --fsm-bottom-inset: calc(env(safe-area-inset-bottom, 0px) + var(--fsm-system-bottom-inset, 0px));

  /* Kilari extracted palette */
  --mbs-brand-primary: #ffcb05; /* yellow */
  --mbs-brand-primary-rgb: 255, 203, 5;
  --mbs-brand-secondary: #07295c; /* navy */
  --mbs-brand-accent: #0b2346; /* deep navy */
  --mbs-brand-accent-rgb: 11, 35, 70;
  --mbs-link: var(--mbs-brand-accent);
  --mbs-highlight: var(--mbs-brand-primary); /* underline/focus accent */
  --mbs-neutral-500: #818181;

  /* Light surfaces */
  --mbs-bg-light: #f8fafc;
  --mbs-surface-light: #ffffff;
  --mbs-border-light: #07295c24; /* alpha navy */
  --mbs-hover-light: #07295c24;
  --mbs-active-light: rgba(var(--mbs-brand-primary-rgb), 0.28);

  /* Dark surfaces */
  --mbs-bg-dark: var(--mbs-brand-accent);
  --mbs-surface-dark: var(--mbs-brand-secondary);
  --mbs-border-dark: #07295c4a; /* alpha navy */
  --mbs-hover-dark: rgba(255, 255, 255, 0.06);
  --mbs-active-dark: rgba(var(--mbs-brand-primary-rgb), 0.22);

  /* Back-compat names used below (keep semantics; update values) */
  --offliner-navy-950: #06152d;
  --offliner-navy-900: var(--mbs-bg-dark);
  --offliner-navy-850: var(--mbs-surface-dark);
  --offliner-navy-800: #0e325f;
  --offliner-slate-300: #cbd5e1;
  --offliner-slate-200: #e2e8f0;
  --offliner-slate-100: #f1f5f9;
  --offliner-border: var(--mbs-border-dark);
  --offliner-primary: var(--mbs-brand-primary);
  --offliner-primary-hover: var(--mbs-brand-primary); /* supporting gold */
  --offliner-focus: rgba(var(--mbs-brand-primary-rgb), 0.45);
}

[data-bs-theme="light"] {
  --mbs-nav-hover-bg: var(--mbs-hover-light);

  /* Core surfaces */
  --bs-body-bg: var(--mbs-bg-light);
  --bs-body-color: var(--mbs-brand-accent);
  --bs-emphasis-color: var(--mbs-brand-accent);
  --bs-secondary-color: rgba(11, 35, 70, 0.72);
  --bs-tertiary-color: rgba(11, 35, 70, 0.58);

  --bs-border-color: var(--mbs-border-light);
  --bs-border-color-translucent: var(--mbs-border-light);

  /* Elevation / panels */
  --bs-secondary-bg: var(--mbs-surface-light);
  --bs-tertiary-bg: var(--mbs-surface-light);
  --bs-card-bg: var(--mbs-surface-light);
  --bs-card-cap-bg: rgba(7, 41, 92, 0.04);

  /* Brand / actions */
  --bs-primary: var(--mbs-brand-primary);
  --bs-primary-rgb: var(--mbs-brand-primary-rgb);
  --bs-warning: var(--mbs-brand-primary);
  --bs-warning-rgb: var(--mbs-brand-primary-rgb);
  --bs-warning-text-emphasis: var(--mbs-brand-accent);
  --bs-warning-bg-subtle: rgba(var(--mbs-brand-primary-rgb), 0.18);
  --bs-warning-border-subtle: rgba(var(--mbs-brand-primary-rgb), 0.42);
  --bs-link-color: var(--mbs-link);
  --bs-link-hover-color: var(--mbs-brand-secondary);

  /* Focus */
  --bs-focus-ring-color: var(--offliner-focus);

  /* Forms */
  --bs-form-control-bg: var(--mbs-surface-light);
  --bs-form-control-border-color: rgba(7, 41, 92, 0.24);
  --bs-form-control-color: var(--mbs-brand-accent);
  --bs-form-control-placeholder-color: var(--mbs-neutral-500);

  /* Lists */
  --bs-list-group-bg: var(--mbs-surface-light);
  --bs-list-group-border-color: rgba(7, 41, 92, 0.16);

  /* Pills / nav */
  --bs-nav-pills-link-active-bg: rgba(var(--mbs-brand-primary-rgb), 0.28);
  --bs-nav-pills-link-active-color: var(--mbs-brand-accent);
}

[data-bs-theme="dark"] {
  --mbs-nav-hover-bg: var(--mbs-hover-dark);

  /* Core surfaces */
  --bs-body-bg: var(--offliner-navy-900);
  --bs-body-color: #ffffff;
  --bs-emphasis-color: #ffffff;
  --bs-secondary-color: rgba(255, 255, 255, 0.78);
  --bs-tertiary-color: rgba(255, 255, 255, 0.62);

  --bs-border-color: var(--offliner-border);
  --bs-border-color-translucent: var(--offliner-border);

  /* Elevation / panels */
  --bs-secondary-bg: var(--offliner-navy-850);
  --bs-tertiary-bg: var(--offliner-navy-850);
  --bs-card-bg: var(--offliner-navy-850);
  --bs-card-cap-bg: rgba(255, 255, 255, 0.02);

  /* Brand / actions */
  --bs-primary: var(--offliner-primary);
  --bs-primary-rgb: var(--mbs-brand-primary-rgb);
  --bs-warning: var(--mbs-brand-primary);
  --bs-warning-rgb: var(--mbs-brand-primary-rgb);
  --bs-warning-text-emphasis: var(--mbs-brand-primary);
  --bs-warning-bg-subtle: rgba(var(--mbs-brand-primary-rgb), 0.18);
  --bs-warning-border-subtle: rgba(var(--mbs-brand-primary-rgb), 0.42);
  --bs-link-color: var(--mbs-brand-primary);
  --bs-link-hover-color: var(--mbs-highlight);

  /* Focus */
  --bs-focus-ring-color: var(--offliner-focus);

  /* Forms */
  --bs-form-control-bg: rgba(255, 255, 255, 0.04);
  --bs-form-control-border-color: rgba(148, 163, 184, 0.32);
  --bs-form-control-color: #ffffff;
  --bs-form-control-placeholder-color: rgba(255, 255, 255, 0.58);

  /* Lists */
  --bs-list-group-bg: rgba(255, 255, 255, 0.03);
  --bs-list-group-border-color: rgba(148, 163, 184, 0.22);

  /* Pills / nav */
  --bs-nav-pills-link-active-bg: var(--mbs-active-dark);
  --bs-nav-pills-link-active-color: #ffffff;
}

/* Dark-mode icon/button contrast tweaks (icons inherit currentColor) */
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: rgba(226, 232, 240, 0.88);
  --bs-btn-border-color: rgba(148, 163, 184, 0.32);
  --bs-btn-hover-color: rgba(226, 232, 240, 0.96);
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.06);
  --bs-btn-hover-border-color: rgba(148, 163, 184, 0.5);
  --bs-btn-active-color: rgba(226, 232, 240, 0.98);
  --bs-btn-active-bg: rgba(255, 255, 255, 0.1);
  --bs-btn-active-border-color: rgba(148, 163, 184, 0.55);
}

[data-bs-theme="dark"] .btn-outline-danger {
  --bs-btn-hover-bg: rgba(220, 53, 69, 0.16);
  --bs-btn-active-bg: rgba(220, 53, 69, 0.22);
}

/* App shell polish */
.app-header,
.app-header > .container-fluid,
.app-header > nav {
  background: var(--fsm-card, #ffffff);
}

.dark .app-header,
.dark .app-header > .container-fluid,
.dark .app-header > nav {
  background: var(--fsm-card, #262626);
}

.app-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.app-header.mbs-shell-header-fixed,
.app-header.fsm-shell-header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030; /* above main content; below modals */
  padding-top: env(safe-area-inset-top, 0px);
}

.app-header.mbs-shell-header-fixed > .container-fluid,
.app-header.mbs-shell-header-fixed > nav,
.app-header.fsm-shell-header-fixed > .container-fluid,
.app-header.fsm-shell-header-fixed > nav {
  /* Keep header actions inside the mobile safe area on first paint. */
  padding-left: calc(1rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1rem + env(safe-area-inset-right, 0px));
}

body.mbs-ios-standalone .app-header.mbs-shell-header-fixed > .container-fluid,
body.mbs-ios-standalone .app-header.mbs-shell-header-fixed > nav,
body.fsm-ios-standalone .app-header.fsm-shell-header-fixed > .container-fluid,
body.fsm-ios-standalone .app-header.fsm-shell-header-fixed > nav {
  /* iOS standalone can paint fixed headers a few px too close to the edge on initial load. */
  padding-left: calc(1rem + env(safe-area-inset-left, 0px) + 8px);
  padding-right: calc(1rem + env(safe-area-inset-right, 0px) + 8px);
}

.app-header.mbs-shell-header-fixed + #shellMain,
.app-header.fsm-shell-header-fixed + #shellMain {
  padding-top: calc(var(--fsm-shell-header-h, var(--mbs-shell-header-h, 0px)) + 0.5rem) !important;
}

.mbs-shell-layout {
  min-height: 100vh;
  min-height: 100dvh;
}

.mbs-shell-layout-desktop {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  min-height: 100dvh;
}

.mbs-shell-content-column {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mbs-shell-layout-desktop #shellMain {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.fsm-shell-title {
  margin: 0;
  font-size: clamp(1.625rem, 1.2rem + 1vw, 2.25rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.fsm-shell-title.fsm-shell-title-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
}

@media (max-width: 767.98px) {
  .fsm-shell-title {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: 0;
  }
}

.national-heatmap-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.national-heatmap-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.national-heatmap-header-main {
  min-width: 0;
  flex: 1 1 320px;
}

.national-heatmap-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.national-heatmap-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.875rem;
}

.national-heatmap-filter-card {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.85rem;
  padding: 0.9rem;
  background: var(--bs-secondary-bg);
  min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.national-heatmap-filter-card-period {
  grid-column: span 1;
}

.national-heatmap-picker-field {
  min-height: 100%;
}

.national-heatmap-map-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  padding: 0.9rem 1rem 0;
  flex-wrap: wrap;
}

.national-heatmap-map {
  min-height: 68vh;
  height: 68vh;
  width: 100%;
  border-bottom-left-radius: calc(var(--bs-card-inner-border-radius, 0.75rem) - 1px);
  border-bottom-right-radius: calc(var(--bs-card-inner-border-radius, 0.75rem) - 1px);
}

.national-heatmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
}

.national-heatmap-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
}

.national-heatmap-legend-swatch {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 999px;
  background: var(--heatmap-swatch);
  opacity: 0.75;
}

.national-heatmap-popup {
  min-width: 240px;
  max-width: 300px;
}

.national-heatmap-popup-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.national-heatmap-popup-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
  font-size: 0.9rem;
}

.national-heatmap-popup-row span {
  color: var(--bs-secondary-color);
}

.national-heatmap-popup-row strong {
  text-align: right;
}

@media (max-width: 767.98px) {
  .national-heatmap-header {
    align-items: stretch;
  }

  .national-heatmap-header-actions {
    width: 100%;
  }

  .national-heatmap-header-actions > .btn {
    flex: 1 1 0;
  }

  .national-heatmap-map {
    min-height: 58vh;
    height: 58vh;
  }
}

.mbs-desktop-sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  width: var(--mbs-desktop-sidebar-w, 12.75rem);
  min-width: var(--mbs-desktop-sidebar-w, 12.75rem);
  max-width: min(100vw, 13.5rem);
  height: 100vh;
  height: 100dvh;
  background: #0b2346;
  color: #ffffff;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
  transition: width 160ms ease, min-width 160ms ease;
  z-index: 1020;
}

.mbs-desktop-sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  height: 100%;
  padding: 0.9rem 0.7rem 0.8rem;
}

.mbs-desktop-sidebar-brand {
  display: grid;
  gap: 0.35rem;
  min-height: 0;
  padding: 0 0.3rem 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mbs-desktop-sidebar-brand-logo-full {
  display: block;
  width: min(100%, 10.8rem);
  height: auto;
  max-height: 3rem;
  object-fit: contain;
}

.mbs-desktop-sidebar-brand-logo-icon {
  display: none;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 0.7rem;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.mbs-desktop-sidebar-brand-copy {
  display: grid;
  min-width: 0;
  gap: 0.05rem;
}

.mbs-desktop-sidebar-brand-subtitle {
  display: block;
  min-width: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mbs-desktop-sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.8rem;
  padding: 0.1rem 0.35rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mbs-desktop-sidebar-user-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: rgba(255, 255, 255, 0.95);
  flex: 0 0 auto;
}

.mbs-desktop-sidebar-user-copy {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
  flex: 1 1 auto;
}

.mbs-desktop-sidebar-user-name {
  min-width: 0;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mbs-desktop-sidebar-user-teams {
  min-width: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.mbs-desktop-sidebar-nav {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.9rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mbs-desktop-sidebar-nav::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.mbs-desktop-sidebar-section {
  display: grid;
  gap: 0.35rem;
}

.mbs-desktop-sidebar-section-label {
  padding: 0 0.65rem;
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.mbs-desktop-nav-list {
  display: grid;
  gap: 0.2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mbs-desktop-nav-item {
  min-width: 0;
}

.mbs-desktop-nav-link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 2.8rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.mbs-desktop-nav-link:hover,
.mbs-desktop-nav-link:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}

.mbs-desktop-nav-link.active,
.mbs-desktop-nav-link.active:hover,
.mbs-desktop-nav-link.active:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: transparent;
  box-shadow: none;
}

.mbs-desktop-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.88);
}

.mbs-desktop-nav-link.active .mbs-desktop-nav-icon,
.mbs-desktop-nav-link.active .mbs-desktop-nav-label {
  color: #ffffff;
}

.mbs-desktop-nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 500;
}

.mbs-desktop-nav-link.active .mbs-desktop-nav-label {
  font-weight: 600;
}

.mbs-desktop-sidebar-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mbs-desktop-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 2.9rem;
  min-width: 2.9rem;
  min-height: 2.9rem;
  padding: 0;
  border-radius: 0.85rem;
  background: rgba(7, 41, 92, 0.45);
  border-color: rgba(255, 255, 255, 0.14);
}

.mbs-desktop-sidebar-toggle:hover,
.mbs-desktop-sidebar-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}

.mbs-desktop-sidebar-toggle .icon {
  width: 1rem;
  height: 1rem;
}

.mbs-desktop-sidebar-toggle-label {
  display: none;
}

.mbs-shell-layout-desktop[data-nav-mode="compact"] .mbs-desktop-sidebar-brand {
  display: grid;
  place-items: center;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.mbs-shell-layout-desktop[data-nav-mode="compact"] .mbs-desktop-sidebar-brand-logo-full {
  display: none;
}

.mbs-shell-layout-desktop[data-nav-mode="compact"] .mbs-desktop-sidebar-brand-logo-icon {
  display: block;
  width: 2.45rem;
  height: 2.45rem;
  margin-inline: auto;
}

.mbs-shell-layout-desktop[data-nav-mode="compact"] .mbs-desktop-sidebar-section-label,
.mbs-shell-layout-desktop[data-nav-mode="compact"] .mbs-desktop-nav-label,
.mbs-shell-layout-desktop[data-nav-mode="compact"] .mbs-desktop-sidebar-brand-copy,
.mbs-shell-layout-desktop[data-nav-mode="compact"] .mbs-desktop-sidebar-brand-subtitle,
.mbs-shell-layout-desktop[data-nav-mode="compact"] .mbs-desktop-sidebar-user {
  display: none;
}

.mbs-shell-layout-desktop[data-nav-mode="compact"] .mbs-desktop-nav-link,
.mbs-shell-layout-desktop[data-nav-mode="compact"] .mbs-desktop-sidebar-toggle {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.mbs-shell-layout-desktop[data-nav-mode="compact"] .mbs-desktop-sidebar-footer {
  justify-content: center;
}

body.mbs-has-desktop-sidebar .form-footer,
body.mbs-has-desktop-sidebar .mbs-fixed-footer,
body.mbs-has-desktop-sidebar .fsm-fixed-footer,
body.fsm-has-desktop-sidebar .form-footer,
body.fsm-has-desktop-sidebar .mbs-fixed-footer,
body.fsm-has-desktop-sidebar .fsm-fixed-footer {
  left: var(--mbs-desktop-sidebar-w, 0px);
  transition: left 160ms ease;
}

/* Login screen */
.mbs-login-main {
  background:
    radial-gradient(circle at top, rgba(59, 130, 246, 0.08), transparent 32%),
    linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}

.mbs-login-screen {
  width: 100%;
  min-height: calc(100vh - 5.5rem);
  min-height: calc(100dvh - 5.5rem);
  display: flex;
  justify-content: center;
  padding: 1rem 0 1.75rem;
}

.mbs-login-stage {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.mbs-login-logo-wrap {
  margin-bottom: 24px;
}

.mbs-login-logo {
  width: auto;
  max-width: min(100%, 220px);
  max-height: 80px;
  height: auto;
}

.mbs-login-card {
  max-width: 400px;
  margin: 0 auto;
  border: none;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.mbs-login-card-body {
  display: grid;
  gap: 1rem;
  padding: 40px 32px;
}

.mbs-login-card-head {
  display: grid;
  gap: 0.25rem;
}

.mbs-login-title {
  color: #0b2346;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.mbs-login-form {
  gap: 1rem;
}

.mbs-login-fields {
  display: grid;
  gap: 0.875rem;
}

.mbs-login-field {
  display: grid;
  gap: 0.375rem;
}

.mbs-login-field .form-label {
  margin-bottom: 6px;
  color: #0b2346;
  font-size: 13px;
  font-weight: 600;
  display: block;
}

.mbs-login-field .form-control {
  min-height: 44px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: none;
  color: #0b2346;
}

.mbs-login-field .form-control:focus,
.mbs-login-field .form-control:focus-visible {
  outline: none;
  border: 2px solid #0b2346;
  box-shadow: none;
}

.mbs-login-actions {
  display: grid;
  gap: 0.625rem;
}

.mbs-login-submit,
.mbs-login-secondary-btn {
  min-height: 48px;
  border-radius: 8px;
  font-weight: 600;
}

.mbs-login-submit {
  background: #0b2346;
  border: none;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.mbs-login-submit:hover,
.mbs-login-submit:focus,
.mbs-login-submit:focus-visible {
  background: #16305b;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  transform: translateY(-1px);
  opacity: 0.92;
  outline: none;
}

.mbs-login-submit:active {
  background: #0b2346 !important;
  transform: translateY(0);
  opacity: 1;
  box-shadow: none;
}

.mbs-login-passkey-wrap {
  margin-top: 0;
}

.mbs-login-secondary-btn {
  min-height: auto;
  padding: 0;
  color: #64748b;
  background-color: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 16px;
}

.mbs-login-secondary-btn:hover,
.mbs-login-secondary-btn:focus,
.mbs-login-secondary-btn:focus-visible {
  color: #0b2346;
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

.mbs-login-secondary-btn:active {
  color: #0b2346 !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

.mbs-login-error,
.mbs-login-passkey-error {
  padding: 0.625rem 0.75rem;
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: 10px;
  background: rgba(254, 242, 242, 0.95);
}

.mbs-login-error:empty,
.mbs-login-passkey-error:empty {
  display: none;
}

@media (min-width: 992px) {
  .mbs-login-main {
    padding-top: 1.25rem !important;
    padding-bottom: 2rem !important;
  }

  .mbs-login-screen {
    align-items: center;
    padding: 1.75rem 0 2.25rem;
  }

  .mbs-login-stage {
    max-width: 400px;
  }

  .mbs-login-card-body {
    padding: 40px 32px;
  }
}

.admin-role-edit-card .card-body {
  padding: 1rem;
}

.admin-role-edit-form {
  display: grid;
  gap: 0.875rem;
}

.admin-role-edit-panel {
  display: grid;
  gap: 0.625rem;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
}

.admin-role-edit-panel--permissions {
  gap: 0.75rem;
}

.admin-role-edit-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.admin-role-permissions-host {
  display: grid;
  gap: 0.5rem;
  max-height: 50vh;
  overflow: auto;
}

.admin-role-permission-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0;
  min-height: auto;
  padding: 0.7rem 0.8rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

.admin-role-permission-row.is-wildcard {
  border-color: #c7d2fe;
  background: #eef2ff;
}

.admin-role-permission-row .form-check-input {
  float: none;
  flex: 0 0 auto;
  margin: 0.2rem 0 0;
}

.admin-role-permission-row .form-check-label {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  cursor: pointer;
  word-break: break-word;
}

.admin-role-permission-row .form-check-input:disabled + .form-check-label {
  opacity: 0.55;
}

.admin-user-role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.admin-user-role-chip {
  font-weight: 500;
}

/* App lock modal: blur background, block clicks */
body.mbs-app-locked #app {
  filter: blur(10px);
  transform: translateZ(0);
}

body.mbs-app-locked {
  overflow: hidden;
}

.mbs-app-lock-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.35);
}

[data-bs-theme="dark"] .mbs-app-lock-backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.mbs-app-lock-modal {
  width: 100%;
  max-width: 420px;
}

body.fsm-portrait-orientation-blocked {
  overflow: hidden;
}

body.fsm-portrait-orientation-blocked #app {
  visibility: hidden;
  pointer-events: none;
}

.fsm-orientation-guard {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(11, 35, 70, 0.82);
  backdrop-filter: blur(4px);
}

body.fsm-portrait-orientation-blocked .fsm-orientation-guard {
  display: flex;
}

.fsm-orientation-guard-card {
  width: min(100%, 30rem);
  padding: 1.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  text-align: center;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.28);
}

.fsm-orientation-guard-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.75rem;
  border-radius: 999px;
  background: rgba(var(--bs-primary-rgb), 0.16);
  color: var(--bs-body-color);
  font-size: 1.5rem;
  font-weight: 700;
}

.fsm-orientation-guard-title {
  font-size: 1.15rem;
  line-height: 1.25;
}

.fsm-orientation-guard-body {
  color: var(--bs-secondary-color);
  line-height: 1.45;
}

/* Fixed bottom form actions footer */
.form-footer {
  bottom: var(--fsm-bottom-inset, var(--mbs-bottom-inset, 0px));
  z-index: 1030; /* Bootstrap fixed-bottom baseline */
}

/* Generic fixed bottom bar (non-form pages) */
.mbs-fixed-footer,
.fsm-fixed-footer {
  bottom: var(--fsm-bottom-inset, var(--mbs-bottom-inset, 0px));
  z-index: 1030; /* Bootstrap fixed-bottom baseline */
}

/* In PWA/standalone mode we reserve a bottom inset above system UI.
   Paint that inset with the same bar background so page content never shows through. */
.form-footer::after,
.mbs-fixed-footer::after,
.fsm-fixed-footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--fsm-bottom-inset, var(--mbs-bottom-inset, 0px)));
  height: var(--fsm-bottom-inset, var(--mbs-bottom-inset, 0px));
  background: inherit;
  pointer-events: none;
}

/* Floating action button (FAB) */
.mbs-fab-host,
.fsm-fab-host {
  position: fixed;
  --mbs-fab-offset-x: 18px;
  --mbs-fab-offset-y: 32px;
  --fsm-fab-offset-x: var(--mbs-fab-offset-x);
  --fsm-fab-offset-y: var(--mbs-fab-offset-y);
  right: calc(var(--fsm-fab-offset-x, var(--mbs-fab-offset-x, 18px)) + env(safe-area-inset-right, 0px));
  bottom: calc(
    var(--fsm-bottom-nav-reserve, var(--mbs-bottom-nav-reserve, 0px)) +
      var(--fsm-form-footer-reserve, var(--mbs-form-footer-reserve, 0px)) +
      var(--fsm-bottom-inset, var(--mbs-bottom-inset, 0px)) +
      var(--fsm-fab-offset-y, var(--mbs-fab-offset-y, 32px))
  );
  z-index: 1040; /* above bottom nav/footer */
}

@media (min-width: 992px) {
  .mbs-fab-host,
  .fsm-fab-host {
    --mbs-fab-offset-x: 24px;
    --mbs-fab-offset-y: 24px;
  }

  body.mbs-route-tasks .mbs-fab-host {
    right: calc(var(--tasks-desktop-sidebar-width, clamp(280px, 21vw, 320px)) - 0.75rem);
  }
}

.mbs-fab-host.mbs-fab-hidden,
.fsm-fab-host.fsm-fab-hidden {
  display: none !important;
}

.mbs-fab,
.fsm-fab {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
  background-color: var(--mbs-brand-primary);
  border-color: var(--mbs-brand-primary);
  color: var(--mbs-brand-accent);
}

/* Tables: clickable rows */
.table tbody tr.mbs-clickable-row,
.table tbody tr.fsm-clickable-row {
  cursor: pointer;
}

.table tbody tr.mbs-clickable-row:hover,
.table tbody tr.fsm-clickable-row:hover {
  background: rgba(7, 41, 92, 0.06);
}

[data-bs-theme="dark"] .table tbody tr.mbs-clickable-row:hover,
[data-bs-theme="dark"] .table tbody tr.fsm-clickable-row:hover {
  background: rgba(255, 255, 255, 0.045);
}

/* Master-detail (list + details panel): animate details on first open */
.mbs-detail-panel,
.fsm-detail-panel {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
  will-change: opacity, transform;
}

.mbs-detail-panel.mbs-detail-panel-visible,
.fsm-detail-panel.fsm-detail-panel-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .mbs-detail-panel,
  .fsm-detail-panel {
    transition: none;
    transform: none;
  }
}

/* Master-detail: dock details + scroll panes (desktop only, when "docked" class is present). */
@media (min-width: 992px) {
  .mbs-master-detail .mbs-master-detail-details-col,
  .fsm-master-detail .fsm-master-detail-details-col {
    opacity: 0;
    transform: translateX(8px);
  }

  .mbs-master-detail.mbs-master-detail-show-details .mbs-master-detail-details-col,
  .fsm-master-detail.fsm-master-detail-show-details .fsm-master-detail-details-col {
    opacity: 1;
    transform: none;
    transition: opacity 120ms ease-out, transform 120ms ease-out;
    will-change: opacity, transform;
  }

  .mbs-master-detail.mbs-master-detail-docked,
  .fsm-master-detail.fsm-master-detail-docked {
    /* Match renderShell's `py-4` vertical gutter so docked split-view pages
       fit inside `#shellMain` without forcing an extra outer page scroll. */
    height: calc(
      100vh - var(--fsm-master-detail-header-h, var(--mbs-master-detail-header-h, 0px)) -
        var(--fsm-bottom-nav-reserve, var(--mbs-bottom-nav-reserve, 0px)) -
        var(--fsm-bottom-inset, var(--mbs-bottom-inset, 0px)) - 2rem
    );
    height: calc(
      100dvh - var(--fsm-master-detail-header-h, var(--mbs-master-detail-header-h, 0px)) -
        var(--fsm-bottom-nav-reserve, var(--mbs-bottom-nav-reserve, 0px)) -
        var(--fsm-bottom-inset, var(--mbs-bottom-inset, 0px)) - 2rem
    );
    overflow: hidden;
  }

  .mbs-master-detail.mbs-master-detail-docked > .row,
  .fsm-master-detail.fsm-master-detail-docked > .row,
  .fsm-master-detail.fsm-master-detail-docked > .flex,
  .fsm-master-detail.fsm-master-detail-docked > .grid {
    height: 100%;
  }

  .mbs-master-detail.mbs-master-detail-docked .mbs-master-detail-col,
  .fsm-master-detail.fsm-master-detail-docked .fsm-master-detail-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }

  .mbs-master-detail.mbs-master-detail-docked .mbs-master-detail-card,
  .fsm-master-detail.fsm-master-detail-docked .fsm-master-detail-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .mbs-master-detail.mbs-master-detail-docked .mbs-master-detail-list-body,
  .fsm-master-detail.fsm-master-detail-docked .fsm-master-detail-list-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1;
    min-height: 0;
    height: 100%;
  }

  .mbs-master-detail.mbs-master-detail-docked .mbs-master-detail-details-card-body,
  .fsm-master-detail.fsm-master-detail-docked .fsm-master-detail-details-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden; /* keep header fixed; details body scrolls */
    height: 100%;
  }

  .mbs-master-detail.mbs-master-detail-docked .mbs-master-detail-details-body,
  .fsm-master-detail.fsm-master-detail-docked .fsm-master-detail-details-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1;
    min-height: 0;
  }
}

.bottom-nav {
  background: var(--bs-tertiary-bg);
  bottom: var(--fsm-bottom-inset, var(--mbs-bottom-inset, 0px));
  /* Bootstrap navbar sizing vars */
  --bs-navbar-padding-y: 0.25rem;
  --bs-navbar-padding-x: 0.5rem;
}

.bottom-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--fsm-bottom-inset, var(--mbs-bottom-inset, 0px)));
  height: var(--fsm-bottom-inset, var(--mbs-bottom-inset, 0px));
  background: inherit;
  pointer-events: none;
}

.bottom-nav > .container-fluid {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.bottom-nav .nav {
  gap: 0.25rem !important; /* override Bootstrap gap-* utilities */
}

.bottom-nav .nav-item {
  min-width: 0; /* allow pills to shrink instead of wrapping awkwardly */
}

.bottom-nav .nav-link {
  border: 1px solid transparent;
  --bs-nav-link-padding-y: 0.2rem;
  --bs-nav-link-padding-x: 0.4rem;
  line-height: 1.1;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The markup uses <span class="small fw-semibold"> — make that smaller in bottom nav only. */
.bottom-nav .nav-link .small {
  font-size: 0.78rem;
}

.bottom-nav .nav-link.dropdown-toggle::after {
  /* On narrow screens this caret can push "More/Още" into a new row. */
  display: none;
}

.bottom-nav .nav-link:hover {
  background: var(--mbs-nav-hover-bg);
}

.bottom-nav .nav-link.active {
  background: var(--mbs-brand-accent);
  color: #ffffff;
  border-color: var(--mbs-brand-accent);
}

/* Ensure badges used in the sync widget look good in dark mode */
[data-bs-theme="dark"] .sync-widget .badge.text-bg-light {
  background: transparent !important;
  color: rgba(226, 232, 240, 0.9) !important;
  border-color: transparent !important;
}

/* Visible, consistent focus without being loud */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(255, 203, 5, 0.35);
}

/* Make list rows feel clickable without changing layout */
.list-group-item {
  background-color: var(--bs-list-group-bg);
  border-color: var(--bs-list-group-border-color);
}

.list-group-item:hover {
  filter: brightness(1.05);
}

/* Minimal inline actions inside list rows */
.list-group-item .btn.btn-link {
  padding: 0.25rem 0.5rem;
  text-decoration: none;
}

.list-group-item .btn.btn-link:hover {
  text-decoration: underline;
}

/* Tables: make row dividers visible in dark mode */
[data-bs-theme="dark"] .table {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(255, 255, 255, 0.14);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.045);
}

[data-bs-theme="dark"] .table > :not(caption) > * > * {
  border-bottom-color: var(--bs-table-border-color);
}

[data-bs-theme="dark"] .table thead th {
  border-bottom-color: rgba(255, 255, 255, 0.24);
}

/* Icon buttons */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1;
}

.settings-icon-btn {
  font-size: 1.18em;
}

.icon {
  width: 1em;
  height: 1em;
  fill: currentColor; /* critical: bootstrap-icons sprite paths have no fill attr */
}

/* Icon buttons: size icons off root font-size (not btn-sm's font-size). */
.btn-icon .icon {
  width: var(--mbs-icon-size, 1em);
  height: var(--mbs-icon-size, 1em);
}

/* Bootstrap `.text-bg-primary` defaults to white text, but our primary is yellow. */
.text-bg-primary {
  color: var(--mbs-brand-secondary) !important;
}

/* Badges: avoid button-like pills; render as plain labels. */
.badge {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* If a badge uses Bootstrap `text-bg-*` helpers, keep text only (no background). */
.badge.text-bg-primary,
.badge.text-bg-secondary,
.badge.text-bg-success,
.badge.text-bg-danger,
.badge.text-bg-warning,
.badge.text-bg-info,
.badge.text-bg-light,
.badge.text-bg-dark {
  background: transparent !important;
}

/* Ensure badges remain readable when primary is yellow. */
.badge.text-bg-primary {
  color: var(--mbs-brand-secondary) !important;
}

/* Task status badges: colored chips (override global "plain label" badges). */
.badge.mbs-status-badge {
  padding: 0.2rem 0.5rem !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
}

.badge.mbs-status-badge.text-bg-secondary {
  background: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important;
  color: #ffffff !important;
}

.badge.mbs-status-badge.text-bg-warning {
  background: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important;
  color: rgba(0, 0, 0, 0.88) !important;
}

.badge.mbs-status-badge.text-bg-success {
  background: rgba(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important;
  color: #ffffff !important;
}

/* Compact selected-feature chips in the biotope editor. */
.badge.biotope-selected-feature-chip {
  align-items: center;
  background: transparent !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 999px !important;
  color: inherit !important;
  display: inline-flex;
  gap: 0.35rem;
  line-height: 1.1;
  padding: 0.2rem 0.5rem !important;
}

.badge.biotope-selected-feature-chip .biotope-selected-feature-remove {
  --bs-btn-close-color: currentColor;
  flex: 0 0 auto;
  font-size: 0.65rem;
  line-height: 1;
  opacity: 0.8;
  padding: 0;
}

/* Force Bootstrap primary buttons to the Kilari yellow brand in every state.
   We intentionally include the bare `.btn-primary` selector so Bootstrap blue
   cannot leak through if a theme attribute is missing on an ancestor. */
.btn-primary,
[data-bs-theme="light"] .btn-primary,
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: var(--mbs-brand-primary);
  --bs-btn-border-color: var(--mbs-brand-primary);
  --bs-btn-color: var(--mbs-brand-accent);
  --bs-btn-hover-bg: var(--mbs-brand-primary);
  --bs-btn-hover-border-color: var(--mbs-brand-primary);
  --bs-btn-hover-color: var(--mbs-brand-accent);
  --bs-btn-active-bg: var(--mbs-brand-primary);
  --bs-btn-active-border-color: var(--mbs-brand-primary);
  --bs-btn-active-color: var(--mbs-brand-accent);
  --bs-btn-disabled-bg: var(--mbs-brand-primary);
  --bs-btn-disabled-border-color: var(--mbs-brand-primary);
  --bs-btn-disabled-color: var(--mbs-brand-accent);
  --bs-btn-focus-shadow-rgb: var(--mbs-brand-primary-rgb);
  background-color: var(--mbs-brand-primary);
  border-color: var(--mbs-brand-primary);
  color: var(--mbs-brand-accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:disabled,
.btn-primary.disabled,
.show > .btn-primary.dropdown-toggle {
  color: var(--mbs-brand-accent) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--mbs-brand-primary) !important;
  border-color: var(--mbs-brand-primary) !important;
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--mbs-brand-primary) !important;
  border-color: var(--mbs-brand-primary) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--mbs-brand-primary) !important;
  border-color: var(--mbs-brand-primary) !important;
  opacity: 0.65;
}

.monitoring-finish-summary-modal {
  border-radius: 0.75rem;
}

.monitoring-finish-primary-btn,
.mbs-mobile-primary-btn,
[data-bs-theme="light"] .monitoring-finish-primary-btn,
[data-bs-theme="light"] .mbs-mobile-primary-btn,
[data-bs-theme="dark"] .monitoring-finish-primary-btn,
[data-bs-theme="dark"] .mbs-mobile-primary-btn {
  --bs-btn-bg: #0b2346;
  --bs-btn-border-color: #0b2346;
  --bs-btn-color: #ffffff;
  --bs-btn-hover-bg: #14345f;
  --bs-btn-hover-border-color: #14345f;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: #081a34;
  --bs-btn-active-border-color: #081a34;
  --bs-btn-active-color: #ffffff;
  --bs-btn-disabled-bg: #5a6f8f;
  --bs-btn-disabled-border-color: #5a6f8f;
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-focus-shadow-rgb: 11, 35, 70;
  background-color: #0b2346;
  border-color: #0b2346;
  color: #ffffff;
}

.monitoring-finish-primary-btn:hover,
.monitoring-finish-primary-btn:focus,
.mbs-mobile-primary-btn:hover,
.mbs-mobile-primary-btn:focus {
  background-color: #14345f !important;
  border-color: #14345f !important;
  color: #ffffff !important;
}

.monitoring-finish-primary-btn:active,
.monitoring-finish-primary-btn.active,
.show > .monitoring-finish-primary-btn.dropdown-toggle,
.mbs-mobile-primary-btn:active,
.mbs-mobile-primary-btn.active,
.show > .mbs-mobile-primary-btn.dropdown-toggle {
  background-color: #081a34 !important;
  border-color: #081a34 !important;
  color: #ffffff !important;
}

.monitoring-finish-primary-btn:disabled,
.monitoring-finish-primary-btn.disabled,
.mbs-mobile-primary-btn:disabled,
.mbs-mobile-primary-btn.disabled {
  background-color: #5a6f8f !important;
  border-color: #5a6f8f !important;
  color: #ffffff !important;
}

.processing-mobile-main {
  background: #f8fafc;
}

.processing-receipt-main {
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}

.processing-receipt-view {
  max-width: 960px;
  margin: 0 auto;
  padding-bottom: calc(var(--mbs-form-footer-reserve, 0px) + 16px);
}

.processing-receipt-error {
  margin: 16px 16px 0;
}

.processing-receipt-card {
  background: #ffffff;
  border: 0;
  border-radius: 8px;
  margin: 16px;
  padding: 20px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.processing-receipt-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.processing-receipt-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  color: #166534;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  padding: 4px 12px;
  text-transform: uppercase;
}

.processing-receipt-status-pill.is-executed {
  background: #dcfce7;
  color: #166534;
}

.processing-receipt-status-pill.is-cancelled {
  background: #fee2e2;
  color: #991b1b;
}

.processing-receipt-status-pill-icon {
  font-size: 12px;
  line-height: 1;
}

.processing-receipt-title {
  margin-top: 8px;
  color: #0b2346;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

.processing-receipt-date {
  margin-top: 4px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.4;
}

.processing-receipt-divider {
  width: 100%;
  border-bottom: 1px dashed #e2e8f0;
  margin: 20px 0;
}

.processing-receipt-feed {
  display: grid;
}

.processing-receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
}

.processing-receipt-row:last-child {
  margin-bottom: 0;
}

.processing-receipt-label {
  min-width: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}

.processing-receipt-value {
  max-width: 60%;
  color: #0b2346;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-align: right;
}

@media (max-width: 575.98px) {
  .processing-receipt-row {
    align-items: flex-start;
  }

  .processing-receipt-label {
    max-width: 38%;
  }

  .processing-receipt-value {
    max-width: 62%;
  }
}

.processing-receipt-signatures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.processing-receipt-signature-block {
  min-width: 0;
}

.processing-receipt-signature-role {
  margin-bottom: 2px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.3;
  text-transform: uppercase;
}

.processing-receipt-signature-name {
  margin-bottom: 8px;
  color: #0b2346;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.processing-receipt-signature-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 8px;
  border-radius: 6px;
  background: #f8fafc;
}

.processing-receipt-signature-image {
  max-width: 100%;
  max-height: 100%;
  mix-blend-mode: multiply;
  object-fit: contain;
}

.processing-receipt-signature-empty {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
}

.processing-receipt-footer-bar {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
  background: #ffffff;
}

.processing-receipt-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: #0b2346;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  padding: 14px 0;
  text-align: center;
  text-transform: uppercase;
}

.processing-receipt-download-btn:hover,
.processing-receipt-download-btn:focus,
.processing-receipt-download-btn:active {
  background: #0b2346;
  color: #ffffff;
}

.processing-receipt-download-btn .icon {
  width: 18px;
  height: 18px;
}

.processing-mobile-header-meta {
  color: #0b2346;
  font-size: 14px;
  font-weight: 700;
}

.processing-mobile-form {
  display: grid;
  gap: 16px;
}

.processing-mobile-form-error {
  margin-bottom: 0;
}

.processing-mobile-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: none;
}

.processing-mobile-card-header {
  padding: 16px 16px 0;
  color: #0b2346;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.processing-mobile-card-body {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.processing-mobile-field-group {
  display: grid;
  gap: 4px;
}

.processing-mobile-input,
.processing-mobile-input.form-control,
.processing-mobile-input.form-select {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background-color: #ffffff;
  box-shadow: none;
}

.processing-mobile-readonly-display {
  display: flex;
  align-items: center;
  min-height: calc(1.5em + 0.5rem + 2px);
  color: var(--bs-body-color);
}

.mbs-notes-input {
  min-height: calc(1.5em + 0.5rem + 2px);
  resize: vertical;
}

.processing-mobile-stage-badge {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  pointer-events: none;
}

.processing-mobile-signature-wrap,
.processing-mobile-signature-field {
  display: grid;
  gap: 6px;
}

.processing-mobile-signature-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.processing-mobile-signature-clear {
  padding: 0;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  line-height: 1.2;
  text-align: right;
  text-decoration: underline;
}

.processing-mobile-signature-box {
  width: 100%;
  min-height: 160px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
  overflow: hidden;
  position: relative;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.processing-mobile-signature-box-wide {
  min-height: 180px;
}

.processing-mobile-signature-canvas {
  display: block;
  width: 100%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.processing-mobile-representatives-list {
  display: block;
}

.processing-mobile-representative-row {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.processing-mobile-representative-row:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.processing-mobile-footer {
  display: grid;
  gap: 12px;
}

.processing-mobile-footer-cancel-row {
  display: flex;
  justify-content: center;
}

.processing-mobile-footer-cancel {
  width: auto;
  padding: 8px 24px;
  border: 1px solid rgba(220, 38, 38, 0.28);
  border-radius: 8px;
  background: transparent;
  color: #dc2626;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.processing-mobile-footer-cancel:hover,
.processing-mobile-footer-cancel:focus,
.processing-mobile-footer-cancel:active {
  background: rgba(220, 38, 38, 0.04) !important;
  color: #dc2626 !important;
  border-color: rgba(220, 38, 38, 0.36) !important;
}

.processing-mobile-footer-submit {
  width: 100%;
  padding: 14px 0;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
}

.monitoring-finish-summary-title {
  color: #0b2346;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}

.monitoring-finish-summary-body {
  padding-top: 0.5rem !important;
}

.monitoring-finish-summary-content {
  display: grid;
  gap: 12px;
}

.monitoring-finish-summary-date {
  color: #0b2346;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.monitoring-finish-summary-row {
  display: grid;
  gap: 0.25rem;
}

.monitoring-finish-summary-label {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.monitoring-finish-summary-value {
  color: #0b2346;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.follow-up-mobile-page {
  display: grid;
  gap: 16px;
  padding: 0 16px 16px;
}

.follow-up-mobile-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px 16px 0;
}

.follow-up-mobile-card-body {
  margin-bottom: 16px;
}

.follow-up-mobile-card-title {
  color: #0b2346;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.follow-up-mobile-card-subtitle {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.follow-up-mobile-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #e2e8f0;
  color: #0b2346;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  padding: 6px 10px;
}

.follow-up-mobile-saved {
  margin-top: 12px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

.follow-up-mobile-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.follow-up-mobile-segment {
  appearance: none;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  min-height: 44px;
  padding: 10px 12px;
  text-align: center;
  text-transform: uppercase;
}

.follow-up-mobile-segment.is-active {
  background: var(--mbs-brand-primary);
  border-color: var(--mbs-brand-primary);
  color: #0b2346;
}

.follow-up-mobile-segment:disabled {
  opacity: 0.72;
}

.follow-up-mobile-plan-section {
  margin-top: 12px;
}

.follow-up-mobile-date-label {
  display: block;
  margin-top: 12px;
  margin-bottom: 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.follow-up-mobile-date-wrap {
  position: relative;
}

.follow-up-mobile-date-input {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
  color: #0b2346;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  padding: 12px 44px 12px 12px;
}

.follow-up-mobile-date-input:focus {
  border-color: #0b2346;
  box-shadow: 0 0 0 0.2rem rgba(11, 35, 70, 0.08);
  outline: 0;
}

.follow-up-mobile-date-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  pointer-events: none;
}

.follow-up-mobile-date-icon .icon {
  width: 18px;
  height: 18px;
}

.follow-up-mobile-submit {
  background: #0b2346;
  border-color: #0b2346;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 8px;
  min-height: 52px;
  padding: 14px 0;
  text-transform: uppercase;
}

.follow-up-mobile-submit:hover,
.follow-up-mobile-submit:focus,
.follow-up-mobile-submit:active {
  background: #07295c !important;
  border-color: #07295c !important;
  color: #ffffff !important;
}

[data-bs-theme="light"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--bs-secondary-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-bg: var(--bs-secondary-bg);
  --bs-btn-hover-border-color: var(--bs-secondary-color);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-active-bg: var(--bs-secondary-bg);
  --bs-btn-active-border-color: var(--bs-secondary-color);
  --bs-btn-active-color: var(--bs-body-color);
}

[data-bs-theme="light"] .btn-outline-primary {
  --bs-btn-hover-color: var(--bs-emphasis-color);
}

[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-hover-color: var(--bs-emphasis-color);
}

.btn-monitoring-brand-outline,
[data-bs-theme="light"] .btn-monitoring-brand-outline,
[data-bs-theme="dark"] .btn-monitoring-brand-outline {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--mbs-brand-primary);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: rgba(var(--mbs-brand-primary-rgb), 0.12);
  --bs-btn-hover-border-color: var(--mbs-brand-primary);
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-bg: rgba(var(--mbs-brand-primary-rgb), 0.2);
  --bs-btn-active-border-color: var(--mbs-brand-primary);
  --bs-btn-focus-shadow-rgb: var(--mbs-brand-primary-rgb);
  --bs-btn-disabled-color: var(--bs-secondary-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: rgba(var(--mbs-brand-primary-rgb), 0.45);
}

[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
  background-color: #ffffff;
  color: var(--mbs-brand-accent);
  border-color: rgba(7, 41, 92, 0.24);
}

[data-bs-theme="light"] .form-control::placeholder {
  color: var(--mbs-neutral-500);
  opacity: 1;
}

/* Dark-mode form contrast: make borders/background clearly visible on navy surfaces. */
[data-bs-theme="dark"] {
  --bs-form-control-bg: rgba(255, 255, 255, 0.06);
  --bs-form-control-border-color: rgba(255, 255, 255, 0.24);
  --bs-form-control-focus-border-color: rgba(var(--mbs-brand-primary-rgb), 0.75);
  --bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(var(--mbs-brand-primary-rgb), 0.22);

  --bs-form-select-bg: rgba(255, 255, 255, 0.06);
  --bs-form-select-border-color: rgba(255, 255, 255, 0.24);
  --bs-form-select-focus-border-color: rgba(var(--mbs-brand-primary-rgb), 0.75);
  --bs-form-select-focus-box-shadow: 0 0 0 0.25rem rgba(var(--mbs-brand-primary-rgb), 0.22);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--bs-form-control-bg);
  border-color: var(--bs-form-control-border-color);
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  border-color: var(--bs-form-control-focus-border-color);
  box-shadow: var(--bs-form-control-focus-box-shadow);
}

/* Editable note/text areas should look clearly writable in both themes. */
textarea.form-control:not([readonly]):not(:disabled) {
  background-color: #ffffff;
  color: var(--mbs-brand-accent);
  border-color: rgba(7, 41, 92, 0.24);
  caret-color: var(--mbs-brand-accent);
}

textarea.form-control:not([readonly]):not(:disabled)::placeholder {
  color: var(--mbs-neutral-500);
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .icon.spin {
    animation: icon-spin 900ms linear infinite;
  }
}

@keyframes icon-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Compact baseline: denser but readable. */
body.compact {
  font-size: 0.95rem;
}

/* Compact defaults (opt-in by class hooks in markup when needed). */
.compact .card-body {
  padding: 0.75rem;
}

.compact .list-group-item {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* Prevent awkward button text wrapping on small widths. */
.btn {
  white-space: nowrap;
}

/* Processing "do now" cancel modal: keep the 2 primary actions reachable on mobile. */
#processingDoNowCancelModal .mbs-processing-cancel-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  width: 100%;
}

#processingDoNowCancelModal .modal-footer .btn {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

#finishMonitoringModal .monitoring-finish-actions {
  flex-wrap: wrap;
}

#finishMonitoringModal .monitoring-finish-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

.monitoring-plan-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.monitoring-plan-mode-grid .btn {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

#processingDoNowCancelModal .mbs-processing-cancel-close {
  grid-column: 1 / -1;
}

@media (max-width: 360px) {
  #processingDoNowCancelModal .mbs-processing-cancel-actions {
    grid-template-columns: 1fr;
  }
}

/* Responsive lists: cards on mobile, table on desktop. */
@media (max-width: 767.98px) {
  .mbs-mobile-cards {
    overflow-x: hidden;
  }

  .mbs-card-list .card-body {
    padding: 0.65rem;
  }

  .mbs-card-list .mbs-card-title {
    line-height: 1.15;
  }

  .mbs-card-list .mbs-card-meta {
    line-height: 1.15;
  }

  .mbs-card-list .mbs-clickable-card {
    cursor: pointer;
  }
}

/* Card selection state (used for biotope list when cards are visible). */
.mbs-card-list .mbs-clickable-card.mbs-selected {
  border-color: rgba(var(--bs-primary-rgb), 0.7);
  box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.22);
  background: rgba(var(--bs-primary-rgb), 0.08);
}

#biotopesListBody {
  padding: 0;
  background: #ffffff;
}

#biotopesStickySection {
  margin: 0;
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 6px 10px -10px rgba(0, 0, 0, 0.28);
}

#biotopesMeta {
  font-size: 12px;
  color: #64748b;
}

#biotopesStickySection .input-group {
  flex-wrap: nowrap;
}

#biotopesInlineSearch,
#biotopesInlineClear {
  height: 36px;
  border-color: #e2e8f0;
}

#biotopesInlineSearch {
  border-radius: 6px 0 0 6px;
}

#biotopesInlineSearch:focus {
  border-color: #0b2346;
  box-shadow: none;
}

#biotopesInlineClear {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 6px 6px 0;
}

#biotopesStickySection .input-group:focus-within #biotopesInlineClear {
  border-color: #0b2346;
}

#biotopesListScrollRegion {
  padding: 0 1rem 1rem;
}

#biotopesCards {
  gap: 0 !important;
}

#biotopesListScrollRegion .mbs-clickable-card {
  margin: 0;
  border: 0 !important;
  border-left: 4px solid transparent !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
  transition: background-color 120ms ease-out, border-left-color 120ms ease-out;
}

#biotopesListScrollRegion .mbs-clickable-card .card-body {
  padding: 16px !important;
}

#biotopesListScrollRegion .mbs-clickable-card:not(.mbs-selected):hover {
  background: #f1f5f9;
}

#biotopesListScrollRegion .biotopes-list-item-main {
  min-width: 0;
}

#biotopesListScrollRegion .biotopes-list-item-title-row,
.biotopes-list-row-name-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

#biotopesListScrollRegion .biotopes-list-item-title-row {
  flex: 1 1 auto;
}

#biotopesListScrollRegion .biotopes-list-item-title {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 700;
  color: #0b2346;
  line-height: 1.35;
}

.biotopes-list-row-name {
  min-width: 0;
  flex: 1 1 auto;
}

#biotopesListScrollRegion .biotopes-list-item-edit-btn,
.biotopes-list-row-name-wrap .biotopes-list-item-edit-btn {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-top: -2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

#biotopesListScrollRegion tr.table-active .biotopes-list-item-edit-btn,
#biotopesListScrollRegion .mbs-clickable-card.mbs-selected .biotopes-list-item-edit-btn {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#biotopesListScrollRegion .biotopes-list-item-area {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  line-height: 1.35;
}

#biotopesListScrollRegion .biotopes-list-item-meta {
  margin-top: 4px;
  min-width: 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.35;
}

#biotopesListScrollRegion .mbs-clickable-card.mbs-selected {
  border-left-color: #0b2346 !important;
  border-bottom-color: #e2e8f0 !important;
  background: #e2e8f0;
  box-shadow: none !important;
}

#biotopesListScrollRegion .mbs-clickable-card.mbs-selected .biotopes-list-item-area {
  color: #0b2346;
}

#biotopesPageError:not(.d-none) {
  margin: 1rem 1rem 0.5rem;
}

#biotopesDetailsCol > .card {
  background: #f8fafc;
  border: 0;
  border-radius: 0;
}

#biotopesDetailsCardBody {
  background: #f8fafc;
  padding: 16px;
}

#biotopeDetailsEditLink {
  --bs-btn-color: #64748b;
  --bs-btn-hover-color: #64748b;
  --bs-btn-active-color: #64748b;
  background: #ffffff !important;
  border: none !important;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  color: #64748b !important;
}

#biotopeDetailsEditLink:hover,
#biotopeDetailsEditLink:active,
#biotopeDetailsEditLink:focus-visible {
  background: #ffffff !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  color: #64748b !important;
}

body.biotope-edit-modal-open .modal-backdrop.show {
  background-color: rgba(15, 23, 42, 0.6);
  opacity: 1;
  backdrop-filter: blur(8px);
}

.biotope-edit-modal .modal-dialog {
  width: min(90vw, 1440px);
  max-width: min(90vw, 1440px);
  margin: 5vh auto;
}

.biotope-edit-modal .modal-content {
  max-height: 90vh;
  min-height: min(90vh, 760px);
  border: 0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 18px 40px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

.biotope-edit-modal-header,
.biotope-edit-modal-footer {
  background: #ffffff;
  border-color: #e2e8f0;
  padding: 20px 24px;
}

.biotope-edit-modal-header {
  align-items: flex-start;
}

.biotope-edit-modal-title {
  color: #0b2346;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.biotope-edit-modal-context {
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}

.biotope-edit-modal-body {
  padding: 24px;
  background: #ffffff;
}

.biotope-edit-modal-loading {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.biotope-edit-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}

.biotope-edit-modal-panel {
  min-width: 0;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.biotope-edit-modal-panel .form-control,
.biotope-edit-modal-panel .form-select {
  min-height: 44px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: none;
}

.biotope-edit-modal-panel .form-control:focus,
.biotope-edit-modal-panel .form-select:focus {
  border-color: #0b2346;
  box-shadow: 0 0 0 0.2rem rgba(11, 35, 70, 0.1);
}

.biotope-edit-modal-section-title {
  margin-bottom: 16px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.biotope-edit-modal-menu {
  z-index: 1060;
  max-height: 220px;
  overflow: auto;
}

.biotope-edit-modal-map-frame,
.biotope-edit-modal-map-empty {
  width: 100%;
  min-height: 260px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.biotope-edit-modal-map-frame {
  aspect-ratio: 16 / 9;
}

.biotope-edit-modal-map-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #64748b;
  text-align: center;
}

.biotope-edit-modal-footer {
  justify-content: flex-end;
}

.biotope-edit-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  width: 100%;
}

.biotope-edit-modal-save {
  background: #0b2346;
  border-color: #0b2346;
  color: #ffffff;
}

.biotope-edit-modal-save:hover,
.biotope-edit-modal-save:focus {
  background: #14345f !important;
  border-color: #14345f !important;
  color: #ffffff !important;
}

.biotope-edit-modal-save:active,
.biotope-edit-modal-save.active,
.show > .biotope-edit-modal-save.dropdown-toggle {
  background: #081a34 !important;
  border-color: #081a34 !important;
  color: #ffffff !important;
}

.biotope-edit-modal-save:disabled,
.biotope-edit-modal-save.disabled {
  background: #94a3b8 !important;
  border-color: #94a3b8 !important;
  color: #ffffff !important;
}

.biotope-edit-modal-cancel,
.biotope-edit-modal-ghost-btn {
  color: #64748b;
  border-color: #cbd5e1;
  background: #ffffff;
}

.biotope-edit-modal-gps-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.biotope-edit-modal-gps-row .input-group {
  flex: 1 1 auto;
}

.biotope-edit-modal-cancel:hover,
.biotope-edit-modal-cancel:focus,
.biotope-edit-modal-ghost-btn:hover,
.biotope-edit-modal-ghost-btn:focus {
  color: #475569;
  border-color: #94a3b8;
  background: #ffffff;
}

@media (max-width: 991.98px) {
  .biotope-edit-modal .modal-dialog {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    margin: 12px auto;
  }

  .biotope-edit-modal .modal-content {
    min-height: auto;
  }

  .biotope-edit-modal-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

}

@media (max-width: 575.98px) {
  .biotope-edit-modal-header,
  .biotope-edit-modal-body,
  .biotope-edit-modal-footer {
    padding: 16px;
  }

  .biotope-edit-modal-actions {
    flex-direction: column-reverse;
  }

  .biotope-edit-modal-actions .btn {
    width: 100%;
  }

  .biotope-edit-modal-gps-row {
    flex-direction: column;
    align-items: stretch;
  }

  .biotope-edit-modal-gps-row .biotope-edit-modal-ghost-btn {
    width: 100%;
  }
}

@media (max-width: 991.98px) {
  .biotope-details-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .biotope-details-overview-location-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }
}

#biotopeDetailsBody {
  margin-top: 12px;
}

.biotope-details-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.biotope-details-pane-header {
  padding: 0;
}

.biotope-details-pane-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.75rem;
}

.biotope-details-pane-title-wrap {
  min-width: 0;
  flex: 1 1 auto;
}

.biotope-details-pane-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #0b2346;
  line-height: 1.25;
}

.biotope-details-pane-edit-btn {
  flex: 0 0 auto;
  margin-top: 0.125rem;
}

.biotope-details-pane-meta {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 400;
  color: #64748b;
}

.biotope-details-pane-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.biotope-details-pane-meta-emphasis {
  color: #475569;
  font-weight: 700;
}

.biotope-details-pane-meta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
  line-height: 1;
}

.biotope-details-pane-meta-link:hover,
.biotope-details-pane-meta-link:focus-visible {
  color: #0b2346;
}

.biotope-details-pane-meta-link .icon {
  width: 0.95em;
  height: 0.95em;
}

.biotope-details-pane-context-row {
  margin-top: 10px;
}

.biotope-details-pane-context-divider {
  height: 1px;
  background: var(--bs-border-color);
  margin-bottom: 8px;
}

.biotope-details-pane-context-text {
  color: #475569;
  font-size: 14px;
  line-height: 1.5;
}

.biotope-details-pane-area {
  display: inline-flex;
  align-items: baseline;
  gap: 0.14rem;
}

.biotope-details-pane-area-value {
  font-weight: 600;
  color: #0f172a;
}

.biotope-details-pane-area-unit {
  font-size: 0.92em;
  letter-spacing: 0;
}

.biotope-details-pane-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.biotope-details-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #0b2346;
  font-size: 12px;
  font-weight: 600;
}

.biotope-details-tag-office {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
}

.biotope-details-section-card {
  background: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.biotope-details-section-title {
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.biotope-details-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.biotope-details-field-label {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.biotope-details-field-value {
  font-size: 14px;
  font-weight: 400;
  color: #334155;
  line-height: 1.4;
}

.biotope-details-field-value-prewrap {
  white-space: pre-wrap;
}

.biotope-details-section-body {
  margin-top: 20px;
}

.biotope-details-overview-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.1fr);
  gap: 1rem;
  align-items: stretch;
}

.biotope-details-map-column,
.biotope-details-overview-copy,
.biotope-details-overview-fields {
  min-width: 0;
}

.biotope-details-overview-fields {
  display: grid;
  gap: 0.85rem;
}

.biotope-details-overview-location-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
  gap: 1rem;
  align-items: start;
}

.biotope-details-overview-location-main,
.biotope-details-overview-location-side {
  min-width: 0;
}

.biotope-details-overview-location-side {
  display: grid;
  gap: 0.5rem;
  padding-top: 0.15rem;
}

.biotope-details-map-frame,
.biotope-details-map-placeholder {
  width: 100%;
  min-height: 280px;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #f8fafc;
}

.biotope-details-map-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-size: 14px;
  color: #64748b;
  text-align: center;
}

.biotope-details-flattened-features {
  margin-top: 20px;
}

.biotope-details-flattened-row + .biotope-details-flattened-row {
  margin-top: 8px;
}

.biotope-details-flattened-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}

.biotope-details-flattened-value {
  font-size: 14px;
  color: #334155;
}

.biotope-details-protocol-table {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
}

.biotope-details-protocol-row + .biotope-details-protocol-row {
  border-top: 1px solid #cbd5e1;
}

.biotope-details-protocol-row-title {
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.biotope-details-protocol-row-value {
  padding: 10px 14px;
  font-size: 14px;
  color: #334155;
  line-height: 1.45;
}

.biotope-feed-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.biotope-feed-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

.biotope-feed-tab.is-active {
  background: #e2e8f0;
  color: #0b2346;
}

.biotope-feed-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.biotope-feed-item {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.biotope-feed-item-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
}

.biotope-feed-item-rail {
  flex: 0 0 auto;
}

.biotope-feed-item-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.biotope-feed-item-title {
  font-size: 14px;
  font-weight: 600;
  color: #0b2346;
  line-height: 1.35;
}

.biotope-feed-item-subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: #334155;
  line-height: 1.4;
}

.biotope-feed-item-meta {
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
}

.biotope-feed-kind-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.32rem;
  border-radius: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.biotope-feed-kind-chip.is-monitoring {
  background: #dbeafe;
  color: #1d4ed8;
}

.biotope-feed-kind-chip.is-initialSurvey {
  background: #fef3c7;
  color: #b45309;
}

.biotope-feed-kind-chip.is-processing {
  background: #ffedd5;
  color: #c2410c;
}

.biotope-feed-kind-chip.is-followUpMonitoring {
  background: #dcfce7;
  color: #15803d;
}

.biotope-feed-kind-chip.is-reminder {
  background: #ede9fe;
  color: #6d28d9;
}

.biotope-feed-kind-chip.is-note {
  background: #e2e8f0;
  color: #475569;
}

.biotope-feed-kind-chip.is-neutral {
  background: #e2e8f0;
  color: #475569;
}

#biotopesDetailsCol .table-responsive {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
}

@media (min-width: 992px) {
  #biotopesMasterDetail > .row {
    --bs-gutter-x: 0;
  }

  #biotopesListCol {
    flex: 0 0 30%;
    width: 30%;
  }

  #biotopesDetailsCol {
    flex: 0 0 70%;
    width: 70%;
    max-width: 70%;
  }

  #biotopesListCol > .card {
    background: #ffffff;
    border: 0;
    border-right: 1px solid #e2e8f0;
    border-radius: 0;
  }

  #biotopesListBody {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  #biotopesListScrollRegion {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Force the "cards" list even on desktop (used when the list pane is narrow). */
@media (min-width: 768px) {
  .mbs-force-cards .mbs-mobile-cards {
    display: block !important;
  }
  .mbs-force-cards .mbs-desktop-table {
    display: none !important;
  }
}

/* Routes editor: layout like the spec sketch (1+2 stacked at 40%, map at 60%). */
.routes-editor-filters-preview {
  border-radius: 0.5rem;
  padding: 0.1rem 0.35rem;
}

.routes-editor-filters-preview.routes-editor-filters-flash {
  background: rgba(var(--bs-primary-rgb), 0.12);
}

.biotope-filter-autocomplete-menu {
  top: calc(100% + 0.125rem);
  left: 0;
  max-height: 14rem;
  overflow: auto;
  z-index: 1080;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
}

.routes-selected-item {
  cursor: grab;
}

.routes-selected-list {
  gap: 0.375rem;
}

.routes-selected-item .card-body {
  padding: 0.45rem 0.55rem 0.45rem 0.45rem;
}

.routes-selected-item-content {
  gap: 0.45rem;
}

.routes-selected-item-main {
  min-width: 0;
  padding-right: 3rem;
}

.routes-selected-item-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  min-height: 1.4rem;
  padding: 0 0.35rem;
  margin-top: 0.05rem;
}

.routes-selected-item-actions {
  top: 0.35rem;
  right: 0.35rem;
  gap: 0.2rem;
}

.routes-selected-item-secondary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.1rem;
}

.routes-selected-item-area {
  flex-shrink: 0;
  line-height: 1.1;
  padding-top: 0.05rem;
}

.routes-selected-item:active {
  cursor: grabbing;
}

.routes-wrap-text {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.2;
}

.routes-details-biotope-name {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routes-details-preview {
  min-width: 0;
}

.routes-details-map {
  width: 100%;
}

.routes-details-map-divider {
  position: relative;
  height: 14px;
  margin-top: 0.15rem;
  cursor: row-resize;
  touch-action: none;
  user-select: none;
}

.routes-details-map-divider::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 3px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: var(--bs-border-color);
  opacity: 0.95;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.routes-details-map-divider:hover::before,
.routes-details-map-divider.is-resizing::before,
body.routes-details-map-resizing .routes-details-map-divider::before {
  background: var(--bs-primary);
  opacity: 1;
}

.routes-details-biotopes-table-wrap {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.routes-details-biotopes-table {
  width: 100%;
  table-layout: fixed;
}

.routes-details-biotopes-order-col {
  width: 3.25rem;
}

.routes-details-biotopes-name-col {
  width: 34%;
}

.routes-details-biotopes-team-col {
  width: 7.5rem;
}

.routes-details-biotopes-area-col {
  width: 5.5rem;
}

.routes-details-biotopes-place-col {
  width: auto;
}

.routes-name-hover {
  min-width: 0;
}

.routes-quick-edit-trigger {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  line-height: 1;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.routes-name-hover:hover .routes-quick-edit-trigger,
.routes-name-hover:focus-within .routes-quick-edit-trigger,
.mbs-clickable-card:hover .routes-quick-edit-trigger,
.mbs-clickable-card:focus-within .routes-quick-edit-trigger {
  opacity: 1;
  pointer-events: auto;
}

.routes-next-action-indicator {
  max-width: 190px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.routes-selected-remove {
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  --mbs-icon-size: 0.85em;
}

.routes-editor-divider,
.routes-editor-left-divider {
  display: none;
}

@media (min-width: 992px) {
  .routes-editor {
    display: flex;
    gap: 0.5rem;
    /* Fill viewport under header, above fixed form footer, inside <main class="py-2"> */
    height: calc(100dvh - var(--routes-editor-header-h, 0px) - var(--mbs-form-footer-reserve, 0px) - 16px);
    min-height: 520px;
  }

  .routes-editor-left {
    flex: 0 0 40%;
    max-width: 40%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .routes-editor-left-divider {
    display: block;
    position: relative;
    flex: 0 0 1px;
    align-self: stretch;
    cursor: row-resize;
    touch-action: none;
    user-select: none;
  }

  .routes-editor-left-divider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: var(--bs-border-color);
    opacity: 0.9;
    transition: background-color 0.15s ease, opacity 0.15s ease;
  }

  .routes-editor-left-divider:hover::before,
  .routes-editor-left.routes-editor-left-resizing .routes-editor-left-divider::before {
    background: var(--bs-primary);
    opacity: 1;
  }

  .routes-editor-right {
    flex: 1 1 60%;
    min-width: 0;
  }

  .routes-editor-divider {
    display: block;
    position: relative;
    flex: 0 0 1px;
    align-self: stretch;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
  }

  .routes-editor-divider::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--bs-border-color);
    opacity: 0.9;
    transition: background-color 0.15s ease, opacity 0.15s ease;
  }

  .routes-editor-divider:hover::before,
  .routes-editor.routes-editor-resizing .routes-editor-divider::before {
    background: var(--bs-primary);
    opacity: 1;
  }

  .routes-editor-pane {
    flex: 1 1 0;
    min-height: 0;
  }

  .routes-editor-pane-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden; /* prevent pane content from visually overlapping other panes */
  }

  .routes-editor-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
  }
}

body.routes-editor-resizing {
  cursor: col-resize;
  user-select: none;
}

body.routes-editor-left-resizing {
  cursor: row-resize;
  user-select: none;
}

body.routes-details-map-resizing {
  cursor: row-resize;
  user-select: none;
}

/* Tasks page: task "card buttons" must allow wrapping (global .btn is nowrap). */
.tasks-page .mbs-task-btn {
  white-space: normal;
}

.tasks-page .mbs-task-btn .badge {
  white-space: nowrap;
}

.tasks-page .tasks-desktop-layout {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
}

.tasks-page .tasks-desktop-main {
  flex: 1 1 auto;
  min-width: 0;
}

.tasks-page .tasks-desktop-divider {
  display: none;
}

.tasks-page .tasks-sticky-sidebar {
  position: sticky;
  top: var(--mbs-shell-header-h, 0px);
  flex: 0 0 clamp(280px, 21vw, 320px);
  width: clamp(280px, 21vw, 320px);
  height: calc(100dvh - var(--mbs-shell-header-h, 0px) - var(--mbs-bottom-nav-reserve, 0px) - var(--mbs-bottom-inset, 0px));
  max-height: calc(100dvh - var(--mbs-shell-header-h, 0px) - var(--mbs-bottom-nav-reserve, 0px) - var(--mbs-bottom-inset, 0px));
  align-self: flex-start;
  background: #f8fafc;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  z-index: 7;
}

@media (min-width: 992px) {
  .tasks-page .tasks-desktop-divider {
    display: block;
    position: relative;
    flex: 0 0 0.5rem;
    width: 0.5rem;
    align-self: stretch;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
    z-index: 8;
  }

  .tasks-page .tasks-desktop-divider::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--bs-border-color);
    opacity: 0.9;
    transition: background-color 0.15s ease, opacity 0.15s ease;
  }

  .tasks-page .tasks-desktop-divider:hover::before,
  .tasks-page .tasks-desktop-layout.tasks-desktop-layout-resizing .tasks-desktop-divider::before {
    background: var(--bs-primary);
    opacity: 1;
  }
}

.tasks-page .tasks-sticky-sidebar-inner {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.tasks-page .tasks-sidebar-panel--calendar {
  flex: 0 0 auto;
}

.tasks-page .tasks-sidebar-panel--calendar .tasks-sidebar-panel-head {
  margin-bottom: 0.45rem;
  padding-bottom: 0.25rem;
}

.tasks-page .tasks-sidebar-calendar {
  display: grid;
  gap: 0.4rem;
  padding-top: 0.05rem;
}

.tasks-page .tasks-sidebar-calendar-month {
  color: #0f172a;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.tasks-page .tasks-sidebar-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.18rem;
}

.tasks-page .tasks-sidebar-calendar-weekday {
  padding: 0 0.05rem 0.12rem;
  color: #64748b;
  font-size: 0.54rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.tasks-page .tasks-sidebar-calendar-day {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.4rem;
  padding: 0.05rem 0.12rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.55);
  color: #0b2346;
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1;
}

.tasks-page .tasks-sidebar-calendar-day.is-weekend {
  background: rgba(11, 35, 70, 0.03);
}

.tasks-page .tasks-sidebar-calendar-day.is-muted {
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.32);
}

.tasks-page .tasks-sidebar-calendar-day.is-today {
  background: #0b2346;
  border-color: #0b2346;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.tasks-page .tasks-sidebar-calendar-day.is-in-range:not(.is-today) {
  border-color: rgba(var(--mbs-brand-accent-rgb), 0.35);
  background: rgba(var(--mbs-brand-accent-rgb), 0.08);
}

.tasks-page .tasks-sidebar-calendar-day-number {
  transform: translateY(0.02rem);
}

[data-bs-theme="dark"] .tasks-page .tasks-sidebar-calendar-month {
  color: #ffffff;
}

[data-bs-theme="dark"] .tasks-page .tasks-sidebar-calendar-weekday {
  color: rgba(226, 232, 240, 0.72);
}

[data-bs-theme="dark"] .tasks-page .tasks-sidebar-calendar-day {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 232, 240, 0.94);
}

[data-bs-theme="dark"] .tasks-page .tasks-sidebar-calendar-day.is-weekend {
  background: rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .tasks-page .tasks-sidebar-calendar-day.is-muted {
  color: rgba(148, 163, 184, 0.82);
  background: rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .tasks-page .tasks-sidebar-calendar-day.is-today {
  background: var(--mbs-brand-primary);
  border-color: var(--mbs-brand-primary);
  color: var(--mbs-brand-accent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .tasks-page .tasks-sidebar-calendar-day.is-in-range:not(.is-today) {
  border-color: rgba(var(--mbs-brand-accent-rgb), 0.45);
  background: rgba(var(--mbs-brand-accent-rgb), 0.12);
}

.tasks-page .tasks-sidebar-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tasks-page .tasks-sidebar-panel--reminders {
  flex: 0 0 auto;
  min-height: 0;
}

.tasks-page .tasks-sidebar-panel--planning {
  flex: 0 1 auto;
  height: fit-content;
  align-self: stretch;
  max-height: 100%;
  overflow: hidden;
}

body.tasks-desktop-layout-resizing {
  cursor: col-resize;
  user-select: none;
}

.tasks-page .tasks-sidebar-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: box-shadow 140ms ease, border-color 140ms ease, transform 140ms ease;
  overflow: hidden;
}

.tasks-page .tasks-sidebar-card:hover,
.tasks-page .tasks-sidebar-card:focus-within {
  cursor: grab;
  border-color: #cbd5e1;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.tasks-page .tasks-sidebar-card:active {
  cursor: grabbing;
}

.tasks-page .tasks-sidebar-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  min-height: 2rem;
  padding-bottom: 0.4rem;
  margin-bottom: 0.75rem;
}

.tasks-page .tasks-sidebar-panel--planning .tasks-sidebar-panel-head {
  margin-bottom: 0.8rem;
}

.tasks-page .tasks-sidebar-panel-note {
  margin-top: 0.1rem;
  color: #64748b;
  font-size: 0.72rem;
  line-height: 1.35;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.tasks-page .tasks-sidebar-panel--reminders .tasks-sidebar-panel-head {
}

.tasks-page .tasks-sidebar-section-title {
  color: #0f172a;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
}

.tasks-page .tasks-sidebar-add-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.9rem;
  width: 1.9rem;
  padding: 0;
  white-space: nowrap;
  font-size: 0.72rem;
  line-height: 1;
}

.tasks-page .tasks-sidebar-reminders-scroll {
  flex: 0 1 auto;
  max-height: min(12rem, 20vh);
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
  padding-bottom: 0.25rem;
}

.tasks-page .tasks-sidebar-planning-scroll {
  --tasks-sidebar-planning-end-space: clamp(6rem, 12vh, 8rem);
  flex: 0 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 2px;
  padding-top: 0.15rem;
  padding-bottom: calc(0.75rem + var(--tasks-sidebar-planning-end-space));
  scroll-padding-bottom: calc(0.75rem + var(--tasks-sidebar-planning-end-space));
  border-radius: 0.9rem;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

.tasks-page .tasks-sidebar-empty {
  padding: 0.75rem 0.85rem;
  color: #64748b;
  font-size: 0.875rem;
  border-radius: 8px;
}

.tasks-page .tasks-sidebar-panel--reminders .tasks-sidebar-empty {
  background: transparent;
  border: 0;
  padding-inline: 0;
}

.tasks-page .tasks-sidebar-reminder-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.45rem 0.35rem 0.55rem;
  border-left: 3px solid #3b82f6;
  outline: 2px solid transparent;
  outline-offset: -2px;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
}

.tasks-page .tasks-sidebar-reminder-item.is-priority {
  border-left-color: #eab308;
}

.tasks-page .tasks-sidebar-reminder-item:hover,
.tasks-page .tasks-sidebar-reminder-item:focus-within {
  outline-color: #0b2346;
}

.tasks-page .tasks-sidebar-reminder-open {
  appearance: none;
  border: 0;
  background: transparent;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  text-align: left;
  color: #334155;
}

.tasks-page .tasks-sidebar-reminder-open:hover,
.tasks-page .tasks-sidebar-reminder-open:focus-visible {
  background: transparent;
}

.tasks-page .tasks-sidebar-reminder-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.tasks-page .tasks-sidebar-reminder-open .tasks-mobile-reminder-details {
  color: inherit;
}

.tasks-page .tasks-sidebar-reminder-open .tasks-mobile-reminder-bell {
  color: #3b82f6;
  top: 0.1rem;
  right: 0.08rem;
  font-size: 0.68rem;
}

.tasks-page .tasks-sidebar-reminder-biotope {
  display: block;
  color: #64748b;
  font-size: 0.7rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-page .tasks-sidebar-reminder-complete-btn {
  align-self: center;
  margin-right: 0.05rem;
  width: 1.9rem;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  flex: 0 0 auto;
}

.tasks-page .tasks-sidebar-reminder-complete-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.tasks-page .tasks-sidebar-reminder-complete-icon .icon {
  width: 0.95rem;
  height: 0.95rem;
}

.tasks-page .tasks-sidebar-reminder-open .tasks-mobile-reminder-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  font-size: 0.92rem;
  line-height: 1.2;
}

.tasks-page .tasks-sidebar-reminder-open .tasks-mobile-reminder-body,
.tasks-page .tasks-sidebar-reminder-open .tasks-mobile-reminder-meta {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  font-size: 0.7rem;
  line-height: 1.2;
}

.tasks-page .tasks-sidebar-plan-group + .tasks-sidebar-plan-group {
  margin-top: 1.1rem;
}

.tasks-page .tasks-sidebar-plan-group:first-child {
  margin-top: 0.35rem;
}

.tasks-page .tasks-sidebar-plan-group-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.7rem;
  color: #64748b;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tasks-page .tasks-sidebar-plan-group-title::before,
.tasks-page .tasks-sidebar-plan-group-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #cbd5e1;
}

.tasks-page .tasks-sidebar-plan-group-title::before {
  margin-right: 0.65rem;
}

.tasks-page .tasks-sidebar-plan-group-title::after {
  margin-left: 0.65rem;
}

.tasks-page .tasks-sidebar-planning-card {
  border: 1px solid #e2e8f0 !important;
  border-left-width: 4px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  color: var(--bs-body-color) !important;
}

.tasks-page .tasks-sidebar-planning-card:hover,
.tasks-page .tasks-sidebar-planning-card:focus-visible,
.tasks-page .tasks-sidebar-planning-card:active {
  color: var(--bs-body-color) !important;
}

.tasks-page .tasks-sidebar-planning-card--urgent {
  background: #fef2f2 !important;
  border-left-color: #ef4444 !important;
}

.tasks-page .tasks-sidebar-planning-card--overdue {
  background: #fffbeb !important;
  border-left-color: #f59e0b !important;
}

.tasks-page .tasks-sidebar-planning-card--standard {
  background: #ffffff !important;
  border-left-color: #e2e8f0 !important;
}

.tasks-page .tasks-sidebar-planning-card .tasks-schedule-entry-drag-handle {
  opacity: 0;
}

.tasks-page .tasks-sidebar-planning-card .tasks-schedule-entry-header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.45rem;
}

.tasks-page .tasks-sidebar-planning-card .tasks-schedule-entry-rail {
  min-width: 1.5rem;
}

.tasks-page .tasks-sidebar-planning-card .tasks-schedule-entry-selector {
  margin-top: 0.05rem;
}

.tasks-page .tasks-sidebar-planning-card .tasks-schedule-entry-title {
  font-size: 0.875rem;
  line-height: 1.22;
}

.tasks-page .tasks-sidebar-planning-card .tasks-schedule-entry-subtitle {
  margin-top: 0.12rem;
  color: #475569;
  font-size: 0.72rem;
  line-height: 1.28;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tasks-page .tasks-sidebar-planning-card .tasks-schedule-entry-area {
  padding-top: 0.02rem;
  color: #475569;
}

.tasks-page .tasks-sidebar-planning-card .tasks-schedule-entry-area-value {
  font-size: 0.8rem;
}

.tasks-page .tasks-sidebar-planning-card .tasks-schedule-entry-area-unit {
  font-size: 0.6rem;
}

.tasks-page .tasks-sidebar-planning-card.is-draggable:hover .tasks-schedule-entry-drag-handle,
.tasks-page .tasks-sidebar-planning-card.is-draggable:focus-visible .tasks-schedule-entry-drag-handle {
  opacity: 1;
}

.tasks-page .tasks-sidebar-planning-card:hover .tasks-schedule-entry-title,
.tasks-page .tasks-sidebar-reminder-item:hover .tasks-mobile-reminder-title,
.tasks-page .tasks-sidebar-reminder-item:focus-within .tasks-mobile-reminder-title {
  color: inherit;
}

.tasks-page .tasks-sidebar-plan-meta {
  margin-top: 0.22rem;
  color: #64748b;
  font-size: 0.7rem;
  line-height: 1.25;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.tasks-page .tasks-sidebar-plan-sep {
  color: #94a3b8;
}

.tasks-page .tasks-sidebar-plan-flags {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tasks-page .tasks-sidebar-plan-flag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
  color: #475569;
  padding: 0.08rem 0.42rem;
  font-size: 0.68rem;
  line-height: 1.25;
}

.tasks-reminder-details-modal {
  background: #f8fafc;
  border: 0;
}

.tasks-reminder-details-modal .modal-header,
.tasks-reminder-details-modal .modal-footer {
  background: #ffffff;
}

.tasks-reminder-details-modal-body {
  max-width: 960px;
  margin: 0 auto;
  padding: 0.5rem;
}

.tasks-completed-info-summary {
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.85rem;
  background: var(--bs-tertiary-bg);
}

.tasks-completed-info-summary.is-shifted {
  background: var(--bs-body-bg);
}

.tasks-completed-info-summary-title {
  color: var(--bs-emphasis-color);
  font-weight: 700;
  line-height: 1.3;
}

.tasks-completed-info-summary-text,
.tasks-completed-info-summary-footnote {
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
  line-height: 1.45;
}

.task-inspector-modal-dialog {
  width: min(72vw, 960px);
  max-width: min(72vw, 960px);
}

.task-inspector-modal-content {
  border: 0;
  border-radius: 12px;
  background: var(--bs-secondary-bg);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.task-inspector-modal-shell {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  min-height: min(78vh, 760px);
  color: var(--bs-body-color);
}

.task-inspector-modal-header,
.task-inspector-modal-footer {
  position: sticky;
  z-index: 2;
  background: var(--bs-secondary-bg);
}

.task-inspector-modal-header {
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.task-inspector-modal-header-copy {
  min-width: 0;
}

.task-inspector-modal-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.task-inspector-modal-title {
  margin: 0;
  color: var(--bs-emphasis-color);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

.task-inspector-modal-meta {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.45rem;
}

.task-inspector-hero-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.task-inspector-hero-title-wrap {
  min-width: 0;
  flex: 1 1 auto;
}

.task-inspector-hero-object {
  color: var(--bs-emphasis-color);
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.3;
  min-width: 0;
}

.task-inspector-hero-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--bs-secondary-color);
  text-decoration: none;
  vertical-align: middle;
  line-height: 1;
  font-size: 1.05rem;
}

.task-inspector-hero-link:hover,
.task-inspector-hero-link:focus-visible {
  color: var(--bs-emphasis-color);
}

.task-inspector-hero-link .icon {
  width: 1.1em;
  height: 1.1em;
}

.task-inspector-hero-link-inline {
  font-size: 0.98rem;
}

.task-inspector-hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.task-inspector-hero-meta-line {
  color: var(--bs-secondary-color);
  font-size: 13px;
  line-height: 1.45;
}

.task-inspector-hero-context-row {
  margin-top: 0.45rem;
}

.task-inspector-hero-context-divider {
  height: 1px;
  background: var(--bs-border-color);
  margin-bottom: 0.35rem;
}

.task-inspector-hero-context-line {
  color: var(--bs-body-color);
  font-size: 13px;
  line-height: 1.45;
}

.task-inspector-hero-area-strong {
  color: var(--bs-emphasis-color);
}

.task-inspector-modal-close {
  flex: 0 0 auto;
  padding: 0.25rem;
  border: 0;
  color: var(--bs-secondary-color);
  text-decoration: none;
}

.task-inspector-modal-close:hover,
.task-inspector-modal-close:focus-visible {
  color: var(--bs-emphasis-color);
}

.task-inspector-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.25rem;
  overflow: auto;
  background: var(--bs-secondary-bg);
}

.task-inspector-modal-footer {
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--bs-border-color);
}

.task-inspector-modal-footer-start,
.task-inspector-modal-footer-end {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

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

.task-inspector-column {
  min-width: 0;
}

.task-inspector-column-map {
  align-self: start;
}

.task-inspector-context-panel,
.task-inspector-panel-block {
  display: grid;
  gap: 0.75rem;
}

.task-inspector-context-panel {
  gap: 1rem;
}

.task-inspector-panel-block-context,
.task-inspector-panel-block-reported {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.task-inspector-map-wrap {
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  background: var(--bs-tertiary-bg);
}

.task-inspector-map-panel {
  display: grid;
  gap: 0.55rem;
}

.task-inspector-map-thumb {
  display: block;
  width: 100%;
  height: 200px;
  max-height: 200px;
  object-fit: cover;
}

.task-inspector-map-frame {
  display: block;
  width: 100%;
  height: 200px;
  max-height: 200px;
  border: 0;
  background: var(--bs-tertiary-bg);
}

.task-inspector-map-empty,
.task-inspector-empty,
.task-inspector-signature-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 0.75rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: 8px;
  color: var(--bs-secondary-color);
  font-size: 12px;
  text-align: center;
  background: var(--bs-tertiary-bg);
}

.task-inspector-section-title {
  padding-bottom: 0.25rem;
  color: var(--bs-secondary-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.task-inspector-stacked-fields {
  display: grid;
  gap: 0.95rem;
}

.task-inspector-completed-meta {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  color: var(--bs-body-color);
  font-size: 14px;
  line-height: 1.45;
}

.task-inspector-completed-meta-primary {
  color: var(--bs-emphasis-color);
  font-weight: 700;
}

.task-inspector-completed-meta-separator,
.task-inspector-completed-meta-secondary {
  color: var(--bs-secondary-color);
}

.task-inspector-stacked-field {
  display: grid;
  gap: 0.25rem;
}

.task-inspector-stacked-label {
  color: var(--bs-secondary-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
}

.task-inspector-stacked-value {
  color: var(--bs-body-color);
  font-size: 14px;
  line-height: 1.45;
}

.task-inspector-detail-row {
  color: var(--bs-body-color);
  font-size: 13px;
  line-height: 1.5;
}

.task-inspector-detail-label {
  font-weight: 700;
}

.task-inspector-characteristics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: flex-start;
}

.task-inspector-characteristics-column + .task-inspector-characteristics-column {
  padding-left: 1.1rem;
  border-left: 1px solid var(--bs-border-color);
}

.task-inspector-characteristics-column,
.task-inspector-characteristics-list {
  display: grid;
  gap: 0.55rem;
}

.task-inspector-characteristics-title {
  color: var(--bs-secondary-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.task-inspector-characteristic-item {
  display: grid;
  gap: 0.02rem;
}

.task-inspector-characteristic-label {
  color: var(--bs-secondary-color);
  font-size: 13px;
  line-height: 1.4;
}

.task-inspector-characteristic-value {
  color: var(--bs-body-color);
  font-size: 14px;
  line-height: 1.45;
}

.task-inspector-fact-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.task-inspector-fact-token {
  color: inherit;
}

.task-inspector-fact-token.is-strong {
  color: var(--bs-emphasis-color);
  font-weight: 700;
}

.task-inspector-fact-token.is-muted {
  color: var(--bs-secondary-color);
  text-transform: lowercase;
}

.task-inspector-fact-token.is-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.task-inspector-fact-separator {
  color: var(--bs-secondary-color);
  font-size: 10px;
  line-height: 1;
}

.task-inspector-trigger {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  color: var(--bs-body-color);
  font-size: 13px;
  line-height: 1.45;
}

.task-inspector-trigger-lead {
  color: var(--bs-emphasis-color);
  font-weight: 700;
}

.task-inspector-trigger-summary {
  font-weight: 400;
}

.task-inspector-trigger.is-alert {
  color: #dc2626;
  font-weight: 700;
}

.task-inspector-history-list {
  display: grid;
  gap: 1rem;
}

.task-inspector-history-item {
  display: grid;
  gap: 0.25rem;
}

.task-inspector-history-item.is-basis {
  padding: 0.75rem;
  border-radius: 8px;
  background: var(--bs-warning-bg-subtle);
  box-shadow: inset 0 0 0 1px rgba(var(--bs-warning-rgb), 0.24);
}

.task-inspector-history-heading {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.task-inspector-history-date,
.task-inspector-history-title {
  color: var(--bs-emphasis-color);
  font-size: 14px;
  font-weight: 700;
}

.task-inspector-history-summary {
  color: var(--bs-secondary-color);
  font-size: 14px;
  line-height: 1.45;
}

.task-inspector-history-item.is-basis .task-inspector-history-summary {
  color: var(--bs-body-color);
}

.task-inspector-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
}

.task-inspector-logistics-stack {
  display: grid;
  gap: 0.75rem;
}

.task-inspector-form-field {
  min-width: 0;
}

.task-inspector-notes-input {
  min-height: calc(1.5em + 0.5rem + 2px);
  resize: vertical;
}

.task-inspector-task-history-block {
  display: grid;
  gap: 0.45rem;
  padding-top: 0.1rem;
}

.task-inspector-task-history-list {
  display: grid;
  gap: 0.35rem;
}

.task-inspector-task-history-item {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  color: var(--bs-secondary-color);
  font-size: 12px;
  line-height: 1.45;
  flex-wrap: wrap;
}

.task-inspector-task-history-date {
  color: var(--bs-secondary-color);
  font-weight: 700;
  white-space: nowrap;
}

.task-inspector-task-history-summary {
  color: var(--bs-secondary-color);
}

.task-inspector-task-history-placeholder {
  color: var(--bs-secondary-color);
  font-size: 12px;
  line-height: 1.45;
}

.task-inspector-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  color: var(--bs-danger, #b91c1c);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 999px;
}

.task-inspector-delete-btn:hover,
.task-inspector-delete-btn:focus-visible {
  color: var(--bs-danger-text-emphasis, var(--bs-danger, #b91c1c));
  background: transparent;
}

.task-inspector-cancel-btn {
  color: var(--bs-secondary-color);
  text-decoration: none;
}

.task-inspector-cancel-btn:hover,
.task-inspector-cancel-btn:focus-visible {
  color: var(--bs-emphasis-color);
}

.task-inspector-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mbs-brand-accent);
  border: 1px solid var(--mbs-brand-accent);
  color: #ffffff;
  border-radius: 8px;
}

.task-inspector-save-btn:hover,
.task-inspector-save-btn:focus-visible {
  background: var(--mbs-brand-secondary);
  border-color: var(--mbs-brand-secondary);
  color: #ffffff;
}

.task-inspector-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 8px;
}

.task-inspector-status-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.task-inspector-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.task-inspector-status-badge.is-planned {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

.task-inspector-status-badge.is-needs-planning {
  background: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}

.task-inspector-status-badge.is-completed {
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.task-inspector-status-badge.is-rzi-present {
  background: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
  border: 1px solid var(--bs-border-color);
}

.task-inspector-status-badge.is-rzi-signed {
  background: var(--bs-info-bg-subtle);
  color: var(--bs-info-text-emphasis);
}

.task-inspector-signature-list {
  display: grid;
  gap: 0.75rem;
}

.task-inspector-signature-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 10px;
  background: var(--bs-tertiary-bg);
}

.task-inspector-signature-copy {
  min-width: 0;
}

.task-inspector-signature-role {
  color: var(--bs-secondary-color);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.task-inspector-signature-name {
  color: var(--bs-emphasis-color);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.task-inspector-signature-secondary {
  margin-top: 0.2rem;
  color: var(--bs-secondary-color);
  font-size: 12px;
  line-height: 1.4;
}

.task-inspector-signature-visual {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  min-height: 64px;
}

.task-inspector-signature-visual img {
  display: block;
  max-height: 60px;
  max-width: 140px;
  object-fit: contain;
}

@media (max-width: 991.98px) {
  .task-inspector-modal-dialog {
    width: min(96vw, 900px);
    max-width: min(96vw, 900px);
    margin: 0.75rem auto;
  }

  .task-inspector-modal-shell {
    min-height: auto;
  }

  .task-inspector-grid,
  .task-inspector-form-grid,
  .task-inspector-characteristics-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .task-inspector-map-frame {
    height: 180px;
    max-height: 180px;
  }

  .task-inspector-map-thumb {
    height: 180px;
    max-height: 180px;
  }

  .task-inspector-modal-header,
  .task-inspector-modal-body,
  .task-inspector-modal-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

[data-bs-theme="light"] .tasks-page .tasks-top-panel-card,
[data-bs-theme="light"] .tasks-page .tasks-top-panel-card .card-body {
  background: #ffffff;
}

[data-bs-theme="light"] .tasks-page .tasks-top-panel-card .form-control,
[data-bs-theme="light"] .tasks-page .tasks-top-panel-card .form-select,
[data-bs-theme="light"] .tasks-page .tasks-top-panel-card .btn-outline-secondary,
[data-bs-theme="light"] .tasks-page .tasks-top-panel-card .btn-outline-success {
  background-color: #ffffff;
}

.tasks-page .tasks-schedule-entry-card {
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
  border-radius: calc(var(--bs-border-radius) + 2px);
  border-left: 4px solid transparent !important;
  outline: 2px solid transparent;
  outline-offset: -2px;
  overflow: hidden;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, outline-color 140ms ease, opacity 140ms ease;
}

.tasks-page .tasks-schedule-entry-card:hover,
.tasks-page .tasks-schedule-entry-card:focus-visible {
  outline-color: #0b2346;
}

.tasks-page .tasks-schedule-entry-card.is-selected {
  background: #f1f5f9 !important;
  box-shadow: 0 0 0 0.15rem rgba(var(--mbs-brand-accent-rgb), 0.16);
}

.tasks-page .tasks-schedule-entry-card.is-selected .tasks-schedule-entry-drag-handle {
  opacity: 1;
  color: var(--bs-primary);
}

.tasks-page .tasks-schedule-entry-card.is-selected .tasks-schedule-entry-selector {
  background: #0b2346;
  border-color: #0b2346;
  color: #ffffff;
}

.tasks-page .tasks-schedule-entry-card.is-selected .tasks-schedule-entry-selector .icon {
  opacity: 1;
  transform: scale(1);
}

.tasks-page .tasks-schedule-entry-card.is-open {
  border-left-color: #cbd5e1 !important;
}

.tasks-page .tasks-schedule-entry-card.is-overdue {
  border-left: 4px solid #ffcb05 !important;
  background: #fffbeb !important;
}

.tasks-page .tasks-schedule-entry-card.is-ghost-overdue {
  border-style: dashed !important;
  border-left: 4px solid rgba(var(--bs-danger-rgb), 0.6) !important;
  background: var(--bs-danger-bg-subtle) !important;
  opacity: 0.9;
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
}

.tasks-page .tasks-schedule-entry-card.is-completed {
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
  border-style: dashed !important;
  opacity: 0.72;
}

.tasks-page .tasks-schedule-entry-card.is-completed.uses-display-date {
  border-style: solid !important;
  border-left-color: #0b2346 !important;
  background: #ffffff !important;
  opacity: 0.9;
}

.tasks-page .tasks-schedule-entry-header,
.tasks-page .tasks-schedule-entry-copy {
  min-width: 0;
}

.tasks-page .tasks-schedule-entry-copy {
  overflow: hidden;
}

.tasks-page .tasks-schedule-entry-ghost-note {
  margin-top: 0.18rem;
  color: var(--bs-danger-text-emphasis);
  font-size: 0.73rem;
  font-weight: 600;
  line-height: 1.3;
}

.tasks-page .tasks-schedule-entry-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.5rem;
  width: 100%;
}

.tasks-page .tasks-schedule-entry-main {
  min-width: 0;
}

.tasks-page .tasks-schedule-entry-rail {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.28rem;
  flex: 0 0 auto;
  min-width: 1.75rem;
}

.tasks-page .tasks-schedule-entry-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0.9rem;
  color: #94a3b8;
  opacity: 0;
  transform: translateY(-1px);
  transition: opacity 120ms ease, color 120ms ease;
  pointer-events: none;
}

.tasks-page .tasks-schedule-entry-selector {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd5e1;
  border-radius: 0.26rem;
  background: #ffffff;
  color: #ffffff;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease, color 120ms ease;
  cursor: pointer;
}

.tasks-page .tasks-schedule-entry-selector .icon {
  width: 0.7rem;
  height: 0.7rem;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 120ms ease, transform 120ms ease;
}

.tasks-page .tasks-schedule-entry-selector.is-disabled {
  opacity: 0.6;
  cursor: default;
}

.tasks-page .tasks-schedule-entry-card:hover .tasks-schedule-entry-selector,
.tasks-page .tasks-schedule-entry-card:focus-visible .tasks-schedule-entry-selector {
  border-color: #94a3b8;
}

.tasks-page .tasks-schedule-kind-chip.is-completed {
  min-width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #16a34a;
}

.tasks-page .tasks-schedule-kind-chip.is-ghost-reference {
  min-width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--bs-primary);
  font-size: 0.95rem;
  line-height: 1;
}

.tasks-page .tasks-schedule-entry-card.is-draggable:hover .tasks-schedule-entry-drag-handle,
.tasks-page .tasks-schedule-entry-card.is-draggable:focus-visible .tasks-schedule-entry-drag-handle {
  opacity: 1;
}

.tasks-page .tasks-schedule-entry-title {
  display: -webkit-box;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.tasks-page .tasks-schedule-entry-area {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.2rem;
  padding-top: 0.05rem;
  white-space: nowrap;
  color: var(--bs-secondary-color);
}

.tasks-page .tasks-schedule-entry-side {
  display: grid;
  justify-items: end;
  gap: 0.08rem;
  min-width: 0;
  max-width: 100%;
  text-align: right;
}

.tasks-page .tasks-schedule-entry-area-value {
  font-weight: 700;
}

.tasks-page .tasks-schedule-entry-area-unit {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tasks-page .tasks-schedule-entry-code {
  font-size: 0.72rem;
  line-height: 1.15;
  color: var(--bs-secondary-color);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-page .tasks-schedule-entry-subtitle {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.tasks-page .tasks-schedule-entry-meta {
  display: grid;
  margin-top: 0.2rem;
  padding-top: 0;
  font-size: 0.72rem;
  line-height: 1.25;
  gap: 0.15rem;
}

.tasks-page .tasks-schedule-entry-meta-line {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.tasks-page .tasks-schedule-entry-meta-label {
  font-weight: 500;
}

.tasks-page .tasks-schedule-kind-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.32rem;
  border-radius: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.tasks-page .tasks-schedule-kind-chip.is-monitoring {
  background: #f0fdf4;
  color: #15803d;
}

.tasks-page .tasks-schedule-kind-chip.is-initialSurvey {
  background: #f0fdf4;
  color: #15803d;
}

.tasks-page .tasks-schedule-kind-chip.is-processing {
  background: #ffedd5;
  color: #c2410c;
}

.tasks-page .tasks-schedule-kind-chip.is-followUpMonitoring {
  background: #dcfce7;
  color: #15803d;
}

.tasks-page .tasks-schedule-kind-chip.is-completed-indicator {
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border-radius: 999px;
  font-size: 0.6rem;
}

.tasks-page .tasks-schedule-preview-btn {
  border-radius: calc(var(--bs-border-radius) + 2px);
}

[data-bs-theme="light"] .tasks-page .tasks-schedule-entry-card,
[data-bs-theme="light"] .tasks-page .tasks-schedule-preview-btn {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-bs-theme="light"] .tasks-page .tasks-schedule-entry-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="light"] .tasks-page .tasks-schedule-entry-card.is-completed {
  background: rgba(241, 245, 249, 0.45);
  border-color: #cbd5e1;
  box-shadow: none;
  color: #64748b;
}

[data-bs-theme="light"] .tasks-page .tasks-schedule-entry-card:hover,
[data-bs-theme="light"] .tasks-page .tasks-schedule-entry-card:focus-visible,
[data-bs-theme="light"] .tasks-page .tasks-schedule-preview-btn:hover,
[data-bs-theme="light"] .tasks-page .tasks-schedule-preview-btn:focus-visible {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-bs-theme="light"] .tasks-page .tasks-schedule-entry-card:hover,
[data-bs-theme="light"] .tasks-page .tasks-schedule-entry-card:focus-visible {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  outline-color: #0b2346;
}

[data-bs-theme="light"] .tasks-page .tasks-schedule-entry-card.is-completed:hover,
[data-bs-theme="light"] .tasks-page .tasks-schedule-entry-card.is-completed:focus-visible {
  background: rgba(241, 245, 249, 0.45);
  border-color: #cbd5e1;
  box-shadow: none;
  color: #64748b;
}

[data-bs-theme="light"] .tasks-page .tasks-schedule-entry-card.is-completed.uses-display-date,
[data-bs-theme="light"] .tasks-page .tasks-schedule-entry-card.is-completed.uses-display-date:hover,
[data-bs-theme="light"] .tasks-page .tasks-schedule-entry-card.is-completed.uses-display-date:focus-visible {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  color: #64748b;
}

[data-bs-theme="light"] .tasks-page .tasks-schedule-entry-card.is-completed .tasks-schedule-entry-title,
[data-bs-theme="light"] .tasks-page .tasks-schedule-entry-card.is-completed .tasks-schedule-entry-area,
[data-bs-theme="light"] .tasks-page .tasks-schedule-entry-card.is-completed .tasks-schedule-entry-area-value,
[data-bs-theme="light"] .tasks-page .tasks-schedule-entry-card.is-completed .tasks-schedule-entry-area-unit,
[data-bs-theme="light"] .tasks-page .tasks-schedule-entry-card.is-completed .tasks-schedule-entry-code {
  color: #64748b;
}

[data-bs-theme="light"] .tasks-page .tasks-schedule-preview-btn:hover,
[data-bs-theme="light"] .tasks-page .tasks-schedule-preview-btn:focus-visible {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

[data-bs-theme="light"] .tasks-page .tasks-schedule-entry-title {
  color: #0f172a;
}

[data-bs-theme="light"] .tasks-page .tasks-schedule-entry-subtitle,
[data-bs-theme="light"] .tasks-page .tasks-schedule-entry-meta,
[data-bs-theme="light"] .tasks-page .tasks-schedule-entry-meta-label,
[data-bs-theme="light"] .tasks-page .tasks-schedule-entry-code,
[data-bs-theme="light"] .tasks-page .tasks-schedule-preview-btn {
  color: #64748b;
}

/* Tasks page: route preview (map 30% + list 70%). */
.tasks-page .tasks-route-preview {
  display: flex;
  flex-direction: column;
  height: min(70vh, 680px);
  min-height: 520px;
}

.tasks-page .tasks-route-preview-map {
  flex: 0 0 30%;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

.tasks-page .tasks-route-preview-map-host {
  flex: 1 1 0;
  min-height: 0;
}

.tasks-page .tasks-route-preview-list {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.tasks-page .tasks-multi-grid-table {
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
}

@media (min-width: 768px) {
  .tasks-page .tasks-multi-sticky-wrap {
    position: sticky;
    top: var(--mbs-shell-header-h, 0px);
    z-index: 8;
    background: #f8fafc;
    padding-bottom: 0.35rem;
    isolation: isolate;
  }

  .tasks-page .tasks-multi-table-head {
    margin-top: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  .tasks-page .tasks-multi-table-head-scroll {
    overflow: hidden;
  }

  .tasks-page .tasks-multi-table-head .table {
    margin-bottom: 0;
  }

  .tasks-page .tasks-multi-table-head thead th {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-bottom-color: var(--bs-border-color);
    vertical-align: middle;
    white-space: normal;
  }

  .tasks-page .tasks-multi-table .tasks-multi-table-body-scroll {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: #ffffff;
    padding-bottom: calc(var(--mbs-bottom-nav-reserve, 0px) + 5.5rem);
    scroll-padding-bottom: calc(var(--mbs-bottom-nav-reserve, 0px) + 5.5rem);
  }

  .tasks-page .tasks-multi-table .tasks-multi-grid-table tbody tr:first-child > * {
    border-top: 0;
  }
}

@media (max-width: 991.98px) {
  .tasks-page .tasks-sticky-sidebar {
    position: static;
    top: auto;
    width: 100%;
    max-height: none;
    height: auto;
  }
}

.tasks-page .tasks-day-card.tasks-day-card-selected {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.15rem rgba(var(--mbs-brand-accent-rgb), 0.15);
}

[data-bs-theme="dark"] .tasks-page .tasks-day-card.tasks-day-card-selected {
  box-shadow: 0 0 0 0.15rem rgba(var(--mbs-brand-accent-rgb), 0.22);
}

/* Tasks page: drag & drop states. */
.tasks-page .mbs-task-btn[data-dnd="task"],
.tasks-page .tasks-route-chip[data-dnd="route"] {
  cursor: grab;
}

.tasks-page.tasks-dnd-dragging .mbs-task-btn[data-dnd="task"],
.tasks-page.tasks-dnd-dragging .tasks-route-chip[data-dnd="route"] {
  cursor: grab;
}

.tasks-page .tasks-drop-cell.tasks-drop-target {
  background: var(--bs-tertiary-bg);
  box-shadow: inset 0 0 0 2px rgba(var(--mbs-brand-accent-rgb), 0.25);
}

.tasks-page .tasks-sidebar-planning-scroll.tasks-drop-target {
  background: var(--bs-tertiary-bg);
  box-shadow: inset 0 0 0 2px rgba(var(--mbs-brand-accent-rgb), 0.25);
}

[data-bs-theme="dark"] .tasks-page .tasks-schedule-entry-card.is-selected {
  box-shadow: 0 0 0 0.15rem rgba(var(--mbs-brand-accent-rgb), 0.22);
}

[data-bs-theme="dark"] .tasks-page .tasks-drop-cell.tasks-drop-target {
  box-shadow: inset 0 0 0 2px rgba(var(--mbs-brand-accent-rgb), 0.32);
}

[data-bs-theme="dark"] .tasks-page .tasks-sidebar-planning-scroll.tasks-drop-target {
  box-shadow: inset 0 0 0 2px rgba(var(--mbs-brand-accent-rgb), 0.32);
}

.tasks-page .tasks-dnd-ghost {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1085;
  opacity: 0.92;
  transform: translate(-9999px, -9999px);
  box-shadow: 0 0.65rem 1.5rem rgba(0, 0, 0, 0.18);
  border-radius: 0.5rem;
  overflow: visible;
}

.tasks-page .tasks-dnd-ghost-card {
  width: 100%;
  max-width: none;
  margin: 0;
}

.tasks-page .tasks-dnd-ghost-badge {
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;
  min-height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.12rem 0.6rem;
  border-radius: 999px;
  background: #ffcb05;
  color: #0b2346;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0.35rem 0.85rem rgba(15, 23, 42, 0.22);
}

.tasks-page .tasks-dnd-ghost .tasks-sidebar-card,
.tasks-page .tasks-dnd-ghost .tasks-sidebar-planning-card {
  cursor: grabbing;
}

.tasks-page .tasks-day-card.tasks-drop-target {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.15rem rgba(var(--mbs-brand-accent-rgb), 0.12);
}

[data-bs-theme="dark"] .tasks-page .tasks-day-card.tasks-drop-target {
  box-shadow: 0 0 0 0.15rem rgba(var(--mbs-brand-accent-rgb), 0.18);
}

.tasks-page .mbs-task-item-wrap {
  position: relative;
}

.tasks-page .tasks-route-block {
  position: relative;
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.tasks-page .tasks-route-block-body {
  min-width: 0;
}

.tasks-page .tasks-route-chip.tasks-route-block-header {
  gap: 0.5rem;
  padding: 0.1rem 0 0.15rem !important;
}

.tasks-page .tasks-route-chip.tasks-route-block-header.is-dnd-disabled {
  cursor: default;
  opacity: 0.78;
}

.tasks-page .tasks-route-chip.tasks-route-block-header .tasks-route-chip-content {
  justify-content: center;
}

.tasks-page .tasks-route-chip.tasks-route-block-header .tasks-route-chip-label {
  text-transform: none;
}

.tasks-page .tasks-route-block.tasks-drop-insert-before::before,
.tasks-page .tasks-route-block.tasks-drop-insert-after::after,
.tasks-page .mbs-task-item-wrap.tasks-drop-insert-before::before,
.tasks-page .mbs-task-item-wrap.tasks-drop-insert-after::after {
  content: "";
  position: absolute;
  left: 0.1rem;
  right: 0.1rem;
  height: 0;
  border-top: 3px solid rgba(var(--mbs-brand-accent-rgb), 0.85);
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
}

.tasks-page .tasks-route-block.tasks-drop-insert-before::before,
.tasks-page .mbs-task-item-wrap.tasks-drop-insert-before::before {
  top: -0.35rem;
}

.tasks-page .tasks-route-block.tasks-drop-insert-after::after,
.tasks-page .mbs-task-item-wrap.tasks-drop-insert-after::after {
  bottom: -0.35rem;
}

[data-bs-theme="dark"] .tasks-page .tasks-route-block.tasks-drop-insert-before::before,
[data-bs-theme="dark"] .tasks-page .tasks-route-block.tasks-drop-insert-after::after,
[data-bs-theme="dark"] .tasks-page .mbs-task-item-wrap.tasks-drop-insert-before::before,
[data-bs-theme="dark"] .tasks-page .mbs-task-item-wrap.tasks-drop-insert-after::after {
  border-top-color: rgba(var(--mbs-brand-accent-rgb), 0.95);
}

.tasks-page .tasks-route-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0.15rem 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: color-mix(in srgb, var(--bs-secondary-color) 88%, transparent) !important;
  text-align: center !important;
  white-space: nowrap;
  overflow: hidden;
}

.tasks-page .tasks-route-chip:hover,
.tasks-page .tasks-route-chip:focus-visible,
.tasks-page .tasks-route-chip:active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--bs-body-color) !important;
}

.tasks-page .tasks-route-chip::before,
.tasks-page .tasks-route-chip::after {
  content: "";
  flex: 1 1 auto;
  min-width: 0;
  border-top: 1px solid color-mix(in srgb, var(--bs-border-color-translucent, rgba(0, 0, 0, 0.08)) 70%, transparent);
}

.tasks-page .tasks-route-chip-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.tasks-page .tasks-route-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.tasks-page .tasks-route-chip-label,
.tasks-page .tasks-route-chip-count {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

.tasks-page .tasks-route-chip-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

.tasks-page .tasks-route-chip-count {
  flex: 0 0 auto;
}

/* Tasks page: keep lists dense on mobile and avoid x-scroll. */
@media (max-width: 767.98px) {
  .tasks-page {
    overflow-x: hidden;
  }

  .tasks-page .tasks-day-card {
    margin-bottom: 0.5rem !important;
  }

  .tasks-page .tasks-day-header {
    margin-bottom: 0.25rem !important;
  }

  .tasks-page .tasks-day-card .card-body {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .tasks-page .mbs-task-btn {
    line-height: 1.15;
    gap: 0.25rem;
  }

  .tasks-page .mbs-task-btn .badge {
    font-size: 0.68rem;
  }
}

.tasks-mobile-page {
  --tasks-mobile-sticky-warning-h: 0px;
  --tasks-mobile-sticky-header-overlap: 2px;
  --tasks-mobile-sticky-route-overlap: 1px;
  gap: 0 !important;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
}

.tasks-mobile-past-warning {
  position: sticky;
  top: var(--mbs-shell-header-h, 0px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  justify-self: stretch;
  margin-left: calc(-1 * var(--bs-gutter-x, 1.5rem) / 2);
  margin-right: calc(-1 * var(--bs-gutter-x, 1.5rem) / 2);
  margin-top: -0.5rem;
  margin-bottom: 0;
  border: 0;
  border-top: 1px solid rgba(var(--bs-warning-rgb), 0.45);
  border-bottom: 1px solid rgba(var(--bs-warning-rgb), 0.45);
  border-radius: 0;
  background: var(--bs-warning-bg-subtle);
  color: var(--bs-body-color);
  padding: 0.5rem calc(var(--bs-gutter-x, 1.5rem) / 2);
  text-align: left;
  font: inherit;
}

.tasks-mobile-past-warning--critical,
.tasks-mobile-past-warning--replanning {
  border-top-color: rgba(var(--bs-danger-rgb), 0.45);
  border-bottom-color: rgba(var(--bs-danger-rgb), 0.45);
  background: var(--bs-danger-bg-subtle);
}

.tasks-mobile-past-warning:hover,
.tasks-mobile-past-warning:focus-visible {
  border-top-color: rgba(var(--bs-warning-rgb), 0.75);
  border-bottom-color: rgba(var(--bs-warning-rgb), 0.75);
  outline: none;
}

.tasks-mobile-past-warning--critical:hover,
.tasks-mobile-past-warning--critical:focus-visible,
.tasks-mobile-past-warning--replanning:hover,
.tasks-mobile-past-warning--replanning:focus-visible {
  border-top-color: rgba(var(--bs-danger-rgb), 0.75);
  border-bottom-color: rgba(var(--bs-danger-rgb), 0.75);
}

.tasks-mobile-past-warning-main {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
}

.tasks-mobile-past-warning-main:hover,
.tasks-mobile-past-warning-main:focus-visible {
  outline: none;
}

.tasks-mobile-past-warning-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--bs-warning-text-emphasis, var(--bs-warning));
}

.tasks-mobile-past-warning--critical .tasks-mobile-past-warning-icon,
.tasks-mobile-past-warning--replanning .tasks-mobile-past-warning-icon {
  color: var(--bs-danger-text-emphasis, var(--bs-danger));
}

.tasks-mobile-past-warning-body {
  display: grid;
  gap: 0.125rem;
  flex: 1 1 auto;
  min-width: 0;
}

.tasks-mobile-past-warning-text {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.25;
  color: var(--bs-secondary-color);
}

.tasks-mobile-past-warning--critical .tasks-mobile-past-warning-text,
.tasks-mobile-past-warning--replanning .tasks-mobile-past-warning-text {
  color: var(--bs-body-color);
}

.tasks-mobile-past-warning-cta {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bs-warning-text-emphasis, var(--bs-warning));
  white-space: nowrap;
}

.tasks-mobile-past-warning-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.25rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bs-danger-text-emphasis, var(--bs-danger));
}

.tasks-mobile-past-warning-close:hover,
.tasks-mobile-past-warning-close:focus-visible {
  outline: none;
  background: rgba(var(--bs-danger-rgb), 0.12);
}

.tasks-mobile-day-section {
  display: grid;
  gap: 0.5rem;
}

.tasks-mobile-page > .tasks-mobile-day-section:first-child,
.tasks-mobile-day-section + .tasks-mobile-day-section,
.tasks-mobile-end-note {
  margin-top: 0.5rem;
}

.tasks-mobile-load-more {
  margin-top: 0.75rem;
}

.tasks-mobile-day-header {
  position: sticky;
  top: calc(
    var(--mbs-shell-header-h, 0px) + var(--tasks-mobile-sticky-warning-h, 0px) - var(--tasks-mobile-sticky-warning-overlap, 0px) - var(--tasks-mobile-sticky-header-overlap, 0px)
  );
  z-index: 5;
  /* Section header (not a clickable "card") */
  margin-left: calc(-1 * var(--bs-gutter-x, 1.5rem) / 2);
  margin-right: calc(-1 * var(--bs-gutter-x, 1.5rem) / 2);
  padding: 0.6rem calc(var(--bs-gutter-x, 1.5rem) / 2);
  border: 0;
  border-bottom: 1px solid var(--bs-border-color);
  border-radius: 0;
  background: var(--bs-secondary-bg);
  box-shadow: none;
}

[data-bs-theme="dark"] .tasks-mobile-day-header {
  box-shadow: none;
}

.tasks-mobile-page--schedule {
  background: #f8fafc;
}

.tasks-mobile-page--schedule > .tasks-mobile-day-section:first-child,
.tasks-mobile-page--schedule .tasks-mobile-end-note {
  margin-top: 0;
}

.tasks-mobile-page--schedule .tasks-mobile-day-section + .tasks-mobile-day-section {
  margin-top: 0;
}

.tasks-mobile-page--schedule .tasks-mobile-day-section {
  gap: 0;
  margin-bottom: 32px;
}

.tasks-mobile-page--schedule .tasks-mobile-day-section:last-of-type {
  margin-bottom: 0;
}

.tasks-mobile-page--schedule .tasks-mobile-day-section {
  --tasks-mobile-day-header-h: 0px;
}

.tasks-mobile-page--schedule .tasks-mobile-day-header {
  padding: 0.75rem calc(var(--bs-gutter-x, 1.5rem) / 2) 0.375rem;
  border-bottom: 0;
  background: #f8fafc;
}

.tasks-mobile-day-header-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  min-width: 0;
  gap: 0.35rem 0.5rem;
}

.tasks-mobile-page--schedule .tasks-mobile-past-warning + .tasks-mobile-day-section .tasks-mobile-day-header {
  padding-top: 0.375rem;
}

.tasks-mobile-page--schedule .tasks-mobile-day-header-title,
.tasks-mobile-page--schedule .tasks-mobile-day-header-count {
  display: block;
}

.tasks-mobile-page--schedule .tasks-mobile-day-header-count {
  margin-top: 0;
  flex: 0 0 auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tasks-mobile-page--schedule .tasks-mobile-day-header-title {
  min-width: 0;
}

.tasks-mobile-page--schedule .tasks-mobile-day-route-groups {
  display: grid;
  gap: 0.5rem;
}

.tasks-mobile-page--schedule .tasks-mobile-route-group {
  display: grid;
  gap: 0.125rem;
}

.tasks-mobile-page--schedule .tasks-mobile-day-cards {
  display: grid;
  gap: 8px;
  background: transparent;
}

.tasks-mobile-page--schedule .tasks-mobile-route-subtitle {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 0.5rem;
  position: sticky;
  top: calc(
    var(--mbs-shell-header-h, 0px) + var(--tasks-mobile-sticky-warning-h, 0px) - var(--tasks-mobile-sticky-warning-overlap, 0px) -
      var(--tasks-mobile-sticky-header-overlap, 0px) + var(--tasks-mobile-day-header-h, 0px) - var(--tasks-mobile-sticky-route-overlap, 1px)
  );
  z-index: 4;
  width: 100%;
  padding: 0.125rem 0;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in srgb, var(--bs-secondary-color) 88%, transparent);
  text-align: center;
  white-space: nowrap;
  background: #f8fafc;
}

.tasks-mobile-page--schedule .tasks-mobile-route-subtitle::before,
.tasks-mobile-page--schedule .tasks-mobile-route-subtitle::after {
  content: "";
  flex: 1 1 auto;
  min-width: 1.25rem;
  border-top: 1px solid rgba(148, 163, 184, 0.6);
}

[data-bs-theme="dark"] .tasks-mobile-page--schedule .tasks-mobile-route-subtitle::before,
[data-bs-theme="dark"] .tasks-mobile-page--schedule .tasks-mobile-route-subtitle::after {
  border-top-color: rgba(148, 163, 184, 0.42);
}

.tasks-mobile-page--schedule .tasks-mobile-route-subtitle-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex: 0 1 auto;
  min-width: 0;
  padding: 0 0.125rem;
  max-width: 100%;
}

.tasks-mobile-page--schedule .tasks-mobile-route-subtitle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.tasks-mobile-page--schedule .tasks-mobile-route-subtitle-icon .icon {
  width: 1.05em;
  height: 1.05em;
}

.tasks-mobile-page--schedule .tasks-mobile-route-subtitle-label,
.tasks-mobile-page--schedule .tasks-mobile-route-subtitle-count {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

.tasks-mobile-page--schedule .tasks-mobile-route-subtitle-label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tasks-mobile-page--schedule .tasks-mobile-route-subtitle-count {
  flex: 0 0 auto;
}

.tasks-mobile-page--schedule .tasks-mobile-load-more {
  padding: 0 0 1rem;
}

.tasks-mobile-page--schedule .tasks-mobile-load-more .btn {
  border-radius: 0.9rem;
}

.tasks-mobile-day-checklist {
  display: grid;
  gap: 0.5rem;
}

.tasks-mobile-day-checklist--missed {
  padding: 0.55rem 0.65rem;
  border-radius: 0.8rem;
  background: rgba(var(--bs-danger-rgb), 0.06);
}

.history-mobile-accordion {
  display: grid;
  gap: 0.5rem;
}

.history-mobile-accordion .accordion-item {
  border: 0;
  background: transparent;
  overflow: visible;
}

.history-mobile-accordion .accordion-header {
  position: sticky;
  top: var(--mbs-shell-header-h, 0px);
  z-index: 5;
}

.history-mobile-day-button {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin: 0;
  padding: 0.6rem 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--bs-border-color);
  border-radius: 0;
  background: var(--bs-secondary-bg);
  box-shadow: none;
  color: var(--bs-body-color);
}

.history-mobile-day-button:not(.collapsed) {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  box-shadow: none;
}

.history-mobile-day-button:focus {
  box-shadow: none;
}

.history-mobile-day-body {
  padding: 0.5rem 0 0;
}

.history-mobile-page .tasks-mobile-task-card {
  background: var(--bs-white);
}

.history-mobile-page .tasks-mobile-task-card.is-delayed-completion {
  background: var(--bs-warning-bg-subtle);
  border-color: rgba(var(--bs-warning-rgb), 0.45);
}

[data-bs-theme="dark"] .history-mobile-page .tasks-mobile-task-card.is-delayed-completion {
  border-color: rgba(var(--bs-warning-rgb), 0.32);
}

.tasks-mobile-check-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  padding: 0.5rem 0.625rem;
  text-align: left;
}

.tasks-mobile-check-row.is-before-next-task {
  background: rgba(var(--mbs-brand-primary-rgb), 0.16);
  border-color: rgba(var(--mbs-brand-primary-rgb), 0.45);
}

[data-bs-theme="dark"] .tasks-mobile-check-row.is-before-next-task {
  background: rgba(var(--mbs-brand-primary-rgb), 0.12);
  border-color: rgba(var(--mbs-brand-primary-rgb), 0.32);
}

.tasks-mobile-check-row.completed {
  opacity: 0.8;
}

.tasks-mobile-check-row.completed .tasks-mobile-check-title {
  text-decoration: line-through;
  color: var(--bs-secondary-color);
}

.tasks-mobile-check-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.tasks-mobile-check-icon-button:focus-visible,
.tasks-mobile-check-summary:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.tasks-mobile-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.tasks-mobile-check-text {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.125rem;
}

.tasks-mobile-check-static,
.tasks-mobile-check-accordion {
  flex: 1 1 auto;
  min-width: 0;
}

.tasks-mobile-check-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
}

.tasks-mobile-check-summary::-webkit-details-marker {
  display: none;
}

.tasks-mobile-check-summary .tasks-mobile-check-text {
  flex: 1 1 auto;
}

.tasks-mobile-check-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--bs-secondary-color);
  transition: transform 120ms ease-out;
}

.tasks-mobile-check-accordion[open] .tasks-mobile-check-chevron {
  transform: rotate(180deg);
}

.tasks-mobile-check-panel {
  padding-top: 0.375rem;
}

.tasks-mobile-reminder-details {
  position: relative;
  display: grid;
  gap: 0.125rem;
  min-width: 0;
  padding-right: 1.25rem;
}

.tasks-mobile-reminder-details.is-compact {
  gap: 0.08rem;
  padding-right: 1rem;
}

.tasks-mobile-reminder-details.is-before-next-task {
  padding: 0.125rem 1.5rem 0.125rem 0.125rem;
  border-radius: 0.5rem;
}

.tasks-mobile-reminder-bell {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
}

.tasks-mobile-reminder-title,
.tasks-mobile-check-title {
  display: block;
}

.tasks-mobile-reminder-body,
.tasks-mobile-reminder-meta,
.tasks-mobile-check-body,
.tasks-mobile-check-meta {
  display: block;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}

.tasks-mobile-task-card,
.tasks-mobile-note-card {
  display: block;
  padding: 0.875rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.9rem;
  background: var(--bs-body-bg);
  min-width: 0;
}

.tasks-mobile-task-card.is-completed {
  opacity: 0.84;
}

.tasks-mobile-task-card--missed {
  border-color: rgba(var(--bs-danger-rgb), 0.24);
  background: rgba(var(--bs-danger-rgb), 0.06);
}

.tasks-mobile-task-card--past-active {
  border-color: rgba(var(--bs-warning-rgb), 0.3);
  background: rgba(var(--bs-warning-rgb), 0.1);
}

.biotope-mobile-profile-page {
  display: grid;
  gap: 0.75rem;
  padding-bottom: calc(5rem + var(--mbs-system-bottom-inset, 0px));
}

.biotope-mobile-profile-card {
  padding: 0.9rem;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.biotope-mobile-profile-card--accent {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.biotope-mobile-summary-card {
  display: grid;
  gap: 0.875rem;
}

.biotope-mobile-summary-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.biotope-mobile-summary-code {
  color: #0b2346;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.biotope-mobile-summary-code.is-empty {
  color: #64748b;
}

.biotope-mobile-summary-area {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 0.65rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #0b2346;
  font-size: 0.8125rem;
  font-weight: 700;
}

.biotope-mobile-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.biotope-mobile-profile-tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 0.75rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
}

.biotope-mobile-profile-tag.is-neutral {
  background: #f1f5f9;
  color: #475569;
}

.biotope-mobile-profile-tag.is-success {
  background: #dcfce7;
  color: #166534;
}

.biotope-mobile-profile-tag.is-danger {
  background: #fee2e2;
  color: #b91c1c;
}

.biotope-mobile-summary-grid {
  display: grid;
  gap: 0.75rem;
}

.biotope-mobile-characteristics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

.biotope-mobile-characteristics-column {
  min-width: 0;
}

.biotope-mobile-characteristics-title {
  margin-bottom: 0.5rem;
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.biotope-mobile-characteristics-list {
  display: grid;
  gap: 0.5rem;
}

.biotope-mobile-characteristics-row {
  display: grid;
  gap: 0.125rem;
}

.biotope-mobile-characteristics-row-label {
  color: #64748b;
  font-size: 0.75rem;
  line-height: 1.25;
}

.biotope-mobile-characteristics-row-value,
.biotope-mobile-characteristics-empty {
  min-width: 0;
  color: #0f172a;
  font-size: 0.8125rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.biotope-mobile-characteristics-row.is-value-only .biotope-mobile-characteristics-row-value {
  font-weight: 600;
}

.biotope-mobile-summary-field {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.biotope-mobile-summary-field-label {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.biotope-mobile-summary-field-value {
  min-width: 0;
  color: #0f172a;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.biotope-mobile-summary-field-value.is-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem;
}

.biotope-mobile-summary-field-value.is-prewrap {
  white-space: pre-wrap;
}

.biotope-mobile-months {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.biotope-mobile-month-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 0.625rem;
  border: 1px solid #dbe4f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 0.8125rem;
  line-height: 1;
}

.biotope-mobile-notes-section {
  display: grid;
  gap: 0.625rem;
}

.biotope-mobile-notes-section.is-empty {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

.biotope-mobile-notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.biotope-mobile-notes-title {
  color: #0b2346;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}

.biotope-mobile-notes-link {
  flex: 0 0 auto;
  color: #0b2346;
  font-size: 0.875rem;
  font-weight: 400;
  text-decoration: none;
}

.biotope-mobile-notes-link:hover,
.biotope-mobile-notes-link:focus-visible {
  color: #0b2346;
  text-decoration: underline;
}

.biotope-mobile-notes-list {
  display: grid;
  gap: 0.5rem;
}

.biotope-mobile-notes-empty-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.biotope-mobile-notes-empty-title {
  min-width: 0;
  color: #0b2346;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

.biotope-mobile-notes-empty-copy {
  flex: 0 0 auto;
  color: #94a3b8;
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.2;
  white-space: nowrap;
}

.biotope-mobile-notes-empty-button:hover .biotope-mobile-notes-empty-title,
.biotope-mobile-notes-empty-button:focus-visible .biotope-mobile-notes-empty-title {
  text-decoration: underline;
}

.biotope-mobile-reminder-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.625rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid #dbe4f0;
  border-left: 4px solid #0b2346;
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.biotope-mobile-reminder-card.is-completed {
  opacity: 0.5;
}

.biotope-mobile-reminder-card.is-completed .biotope-mobile-reminder-text {
  text-decoration: line-through;
}

.biotope-mobile-reminder-check {
  width: 18px;
  height: 18px;
  margin-top: 0.1rem;
  border: 1.5px solid #94A3B8;
  border-radius: 999px;
  background: #ffffff;
  padding: 0;
  flex: 0 0 auto;
}

.biotope-mobile-reminder-card.is-completed .biotope-mobile-reminder-check {
  background: #0b2346;
  border-color: #0b2346;
  box-shadow: inset 0 0 0 3px #ffffff;
}

.biotope-mobile-reminder-text {
  min-width: 0;
  color: #0f172a;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.biotope-mobile-note-card {
  padding: 0.75rem 0.8rem;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
}

.biotope-mobile-note-heading {
  min-width: 0;
  color: #0f172a;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.biotope-mobile-note-body-wrap {
  margin-top: 0.35rem;
}

.biotope-mobile-note-body {
  color: #64748B;
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-word;
}

.biotope-mobile-note-card.is-expanded .biotope-mobile-note-body {
  display: block;
  -webkit-line-clamp: unset;
}

.biotope-mobile-note-expand {
  margin-top: 0.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0b2346;
  font-size: 0.8125rem;
  line-height: 1.2;
}

.biotope-mobile-history-section {
  display: grid;
  gap: 0.5rem;
}

.biotope-mobile-history-title {
  color: #0b2346;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}

.biotope-mobile-section-title {
  color: #0b2346;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 1rem;
}

.biotope-mobile-history-list {
  display: block;
}

.biotope-mobile-history-row {
  padding: 0.625rem 0;
  border-bottom: 1px solid #E2E8F0;
}

.biotope-mobile-history-row:last-child {
  border-bottom: 0;
}

.biotope-mobile-history-line {
  display: block;
  min-width: 0;
  color: #64748B;
  font-size: 0.875rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-mobile-note-card .flex-grow-1,
.tasks-mobile-note-card .flex-grow-1 > div,
.tasks-mobile-inline-note,
.tasks-mobile-reminder-title,
.tasks-mobile-reminder-body,
.tasks-mobile-reminder-meta {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.biotope-mobile-feature-list,
.biotope-mobile-profile-status-body {
  display: grid;
  gap: 0.5rem;
}

.biotope-mobile-features-section {
  padding: 0 0 0.75rem;
  border-bottom: 1px solid #E2E8F0;
}

.biotope-mobile-features-section .biotope-mobile-feature-list {
  gap: 0.125rem;
}

.biotope-mobile-tasks-section.tasks-mobile-page--schedule {
  background: #ffffff;
  padding-top: 1.05rem;
}

.biotope-mobile-tasks-body {
  display: block;
}

.biotope-mobile-task-list {
  display: grid;
  gap: 0.625rem;
}

.biotope-mobile-passive-task-block {
  margin-top: 0.875rem;
}

.biotope-mobile-passive-task-heading {
  margin-bottom: 0.5rem;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.biotope-mobile-passive-task-list {
  display: grid;
  gap: 0.5rem;
}

.biotope-mobile-passive-task-item {
  padding: 0.75rem 0;
  border-top: 1px solid rgba(148, 163, 184, 0.24);
}

.biotope-mobile-passive-task-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.biotope-mobile-passive-task-item-title {
  color: #0f172a;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}

.biotope-mobile-passive-task-item-meta {
  margin-top: 0.1875rem;
  color: #64748b;
  font-size: 0.75rem;
  line-height: 1.25;
}

.biotope-mobile-task-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 0.8125rem 0.875rem 0.75rem;
  border: 1px solid #E2E8F0;
  border-left: 4px solid transparent;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  min-width: 0;
}

.biotope-mobile-task-card.is-selected {
  border-left-color: #0b2346;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.biotope-mobile-task-card--schedule {
  border-left-color: #e2e8f0;
  padding: 0.7rem 0.75rem 0.72rem 0.68rem;
}

.biotope-mobile-task-card--schedule.is-selected {
  border-left-color: #e2e8f0;
  box-shadow: 0 0 0 0.12rem rgba(11, 35, 70, 0.12);
}

.biotope-mobile-task-card--schedule.is-schedule-past-active {
  border-color: rgba(var(--bs-warning-rgb), 0.28);
  border-left-color: #ffcb05;
  background: #fffbeb;
}

.biotope-mobile-task-card--schedule.is-schedule-missed {
  border-color: rgba(var(--bs-danger-rgb), 0.28);
  border-style: dashed;
  border-left: 4px solid rgba(var(--bs-danger-rgb), 0.72);
  background: rgba(var(--bs-danger-rgb), 0.08);
  box-shadow: none;
}

.biotope-mobile-task-card-info {
  min-width: 0;
}

.biotope-mobile-task-card-meta {
  margin-bottom: 0.3125rem;
  color: #64748B;
  font-size: 0.75rem;
  line-height: 1.25;
}

.biotope-mobile-task-card-basis {
  margin-bottom: 0.4375rem;
  color: #475569;
  font-size: 0.75rem;
  line-height: 1.3;
}

.biotope-mobile-task-card-basis--schedule {
  margin-top: 0.18rem;
  margin-bottom: 0;
  font-size: 0.82rem;
  line-height: 1.2;
}

.biotope-mobile-task-card-title-row {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  min-width: 0;
}

.biotope-mobile-task-card-title-row--combined {
  flex-wrap: nowrap;
}

.biotope-mobile-task-card-kind-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #475569;
}

.biotope-mobile-task-card-kind-icon .icon {
  width: 15px;
  height: 15px;
}

.biotope-mobile-task-card-title {
  min-width: 0;
  color: #0b2346;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
}

.biotope-mobile-task-card--schedule .biotope-mobile-task-card-title {
  font-size: 0.98rem;
  line-height: 1.2;
}

.biotope-mobile-task-card-title--single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.biotope-mobile-task-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0b2346;
  border: 1px solid rgba(11, 35, 70, 0.08);
  color: #ffffff;
  text-decoration: none;
  flex: 0 0 auto;
  box-shadow: 0 1px 2px rgba(11, 35, 70, 0.14);
}

.biotope-mobile-task-card-action:hover,
.biotope-mobile-task-card-action:focus-visible {
  background: #17345d;
  color: #ffffff;
  text-decoration: none;
}

.biotope-mobile-task-card-action.is-disabled,
.biotope-mobile-task-card-action.is-disabled:hover,
.biotope-mobile-task-card-action.is-disabled:focus-visible {
  background: #d7dee8;
  border-color: rgba(11, 35, 70, 0.08);
  box-shadow: none;
  color: #7b8aa0;
  cursor: not-allowed;
  pointer-events: none;
}

.biotope-mobile-task-card-action .icon {
  width: 16px;
  height: 16px;
}

.biotope-mobile-task-card--schedule .tasks-mobile-schedule-task-chip.is-initialSurvey {
  background: #dbeafe;
  color: #1d4ed8;
}

.biotope-mobile-task-card--schedule .tasks-mobile-schedule-task-chip.is-monitoring {
  background: #f0fdf4;
  color: #15803d;
}

.biotope-mobile-task-card--schedule .tasks-mobile-schedule-task-chip.is-processing {
  background: #ffedd5;
  color: #c2410c;
}

.biotope-mobile-task-card--schedule .tasks-mobile-schedule-task-chip.is-followUpMonitoring {
  background: #dcfce7;
  color: #15803d;
}

.biotope-mobile-task-card--schedule .tasks-mobile-schedule-task-chip.is-monitoringFollowUp {
  background: #ede9fe;
  color: #6d28d9;
}

.biotope-mobile-profile-status-body > :first-child {
  margin-top: 0 !important;
}

.biotope-mobile-feature-row {
  display: grid;
  gap: 0.1rem;
  line-height: 1.35;
}

.biotope-mobile-feature-label {
  font-weight: 600;
}

.tasks-mobile-task-card[data-role="taskCard"] {
  cursor: pointer;
}

.tasks-mobile-task-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-top: 0.1rem;
}

.tasks-mobile-task-card[data-role="taskCard"]:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

@keyframes tasksMobileTaskCardPop {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0);
  }

  35% {
    transform: scale(1.02);
    box-shadow: 0 0 0 0.35rem rgba(var(--bs-primary-rgb), 0.18);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0);
  }
}

.tasks-mobile-task-card.tasks-mobile-task-card-focus-pop {
  animation: tasksMobileTaskCardPop 900ms ease-out;
  transform-origin: center center;
}

@keyframes tasksMobileScheduleTaskCardPop {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.01);
  }

  100% {
    transform: scale(1);
  }
}

/* Schedule cards: harden shrink/ellipsis for narrow viewports and larger root font sizes. */
.tasks-mobile-page--schedule .tasks-mobile-day-cards > .tasks-mobile-task-card {
  border: 1px solid #e2e8f0;
  border-left: 4px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  background: #ffffff;
  overflow-x: clip;
  padding: 0.7rem 0.75rem 0.72rem 0.68rem;
}

.tasks-mobile-page--schedule .tasks-mobile-day-cards > .tasks-mobile-task-card.tasks-mobile-task-card--missed {
  border-color: rgba(var(--bs-danger-rgb), 0.28);
  border-style: dashed;
  border-left: 4px solid rgba(var(--bs-danger-rgb), 0.72);
  background: rgba(var(--bs-danger-rgb), 0.08);
  box-shadow: none;
}

.tasks-mobile-page--schedule .tasks-mobile-day-cards > .tasks-mobile-task-card.tasks-mobile-task-card--past-active {
  border-color: rgba(var(--bs-warning-rgb), 0.28);
  border-left-color: #ffcb05;
  background: #fffbeb;
}

.tasks-mobile-missed-panel {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.5rem;
  padding: 0.75rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(var(--bs-danger-rgb), 0.24);
  background: rgba(var(--bs-danger-rgb), 0.05);
}

.tasks-mobile-missed-panel-head {
  display: grid;
  gap: 0.18rem;
}

.tasks-mobile-missed-panel-title {
  color: var(--bs-danger-text-emphasis);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
}

.tasks-mobile-missed-panel-text {
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  line-height: 1.35;
}

.tasks-mobile-missed-panel-body {
  display: grid;
  gap: 0.6rem;
}

.tasks-mobile-day-section--missed .tasks-mobile-day-header-title {
  color: var(--bs-danger-text-emphasis);
}

.tasks-mobile-missed-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.48rem;
  border-radius: 999px;
  background: rgba(var(--bs-danger-rgb), 0.12);
  color: var(--bs-danger-text-emphasis);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.1;
}

.tasks-mobile-page--schedule .tasks-mobile-day-cards > .tasks-mobile-task-card > .d-flex {
  width: 100%;
  min-width: 0;
}

.tasks-mobile-page--schedule .tasks-mobile-day-cards > .tasks-mobile-task-card > .d-flex > .flex-grow-1.min-w-0 {
  flex: 1 1 0%;
  width: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.tasks-mobile-page--schedule .tasks-mobile-day-cards > .tasks-mobile-task-card.tasks-mobile-task-card-focus-pop {
  animation: tasksMobileScheduleTaskCardPop 900ms ease-out;
}

.tasks-mobile-task-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.tasks-mobile-page--schedule .tasks-mobile-task-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.tasks-mobile-page--schedule .tasks-mobile-task-top > :first-child {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.tasks-mobile-schedule-card-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
}

.tasks-mobile-schedule-card-main {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
}

.tasks-mobile-schedule-card-rail {
  display: flex;
  align-items: flex-start;
  flex: 0 0 auto;
  padding-top: 0.05rem;
}

.tasks-mobile-schedule-card-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.tasks-mobile-schedule-card-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  flex: 0 0 auto;
}

.tasks-mobile-page--schedule .tasks-mobile-task-title-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.3rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.tasks-mobile-page--schedule .tasks-mobile-task-title-row > :last-child {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.tasks-mobile-page--schedule .tasks-mobile-schedule-card-copy .tasks-mobile-task-title {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.2;
}

.tasks-mobile-task-title {
  display: block;
  min-width: 0;
  line-height: 1.25;
}

.tasks-mobile-task-top-side {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.tasks-mobile-task-top-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
}

.tasks-mobile-task-area {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  white-space: nowrap;
  color: var(--bs-secondary-color);
}

.tasks-mobile-task-area-value {
  font-weight: 700;
}

.tasks-mobile-task-area-unit {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tasks-mobile-task-code {
  color: var(--bs-secondary-color);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}

.tasks-mobile-task-note-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bs-secondary-color);
}

.tasks-mobile-task-note-button:hover,
.tasks-mobile-task-note-button:focus-visible {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  outline: none;
}

.tasks-mobile-task-location {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  line-height: 1.35;
  min-width: 0;
}

.tasks-mobile-page--schedule .tasks-mobile-task-location {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-mobile-task-location-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-top: 0.08rem;
  color: var(--bs-danger);
}

.tasks-mobile-page--schedule .tasks-mobile-task-title {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.15;
}

.tasks-mobile-page--schedule .tasks-mobile-task-location-text {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tasks-mobile-page--schedule .tasks-mobile-task-location {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  white-space: normal;
}

.tasks-mobile-page--schedule .tasks-mobile-task-location.small.text-body-secondary.mt-1 {
  margin-top: 0.12rem !important;
  font-size: 0.82rem;
  line-height: 1.2;
}

.tasks-mobile-page--schedule .tasks-mobile-task-location--schedule {
  margin-top: 0.14rem;
  font-size: 0.82rem;
  line-height: 1.2;
}

.tasks-mobile-page--schedule .tasks-mobile-task-top-side {
  align-items: flex-end;
  gap: 0.35rem;
}

.tasks-mobile-page--schedule .tasks-mobile-task-top-meta {
  gap: 0.02rem;
}

.tasks-mobile-page--schedule .tasks-mobile-task-area {
  font-size: 0.9rem;
  gap: 0.15rem;
}

.tasks-mobile-page--schedule .tasks-mobile-task-area-unit {
  font-size: 0.66rem;
}

.tasks-mobile-page--schedule .tasks-mobile-task-code {
  font-size: 0.72rem;
  letter-spacing: 0.01em;
}

.tasks-mobile-page--schedule .tasks-mobile-task-meta--schedule {
  margin-top: 0.32rem !important;
}

.tasks-mobile-task-card [data-role="taskNoteBody"],
.tasks-mobile-task-card [data-role="taskNoteItem"] {
  display: none !important;
}

.tasks-mobile-inline-notes {
  display: grid;
  gap: 0.5rem;
}

.tasks-mobile-page--schedule .tasks-mobile-inline-notes.mt-2,
.tasks-mobile-page--schedule .tasks-mobile-schedule-task-list.mt-2 {
  margin-top: 0.3rem !important;
}

.tasks-mobile-page--schedule .tasks-mobile-inline-notes {
  gap: 0.35rem;
}

.tasks-mobile-inline-note {
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--bs-tertiary-bg);
}

.tasks-mobile-page--schedule .tasks-mobile-inline-note {
  padding: 0.5rem 0.625rem;
}

.tasks-mobile-inline-note.is-before-next-task {
  background: rgba(var(--mbs-brand-primary-rgb), 0.16);
  border: 1px solid rgba(var(--mbs-brand-primary-rgb), 0.42);
}

[data-bs-theme="dark"] .tasks-mobile-inline-note.is-before-next-task {
  background: rgba(var(--mbs-brand-primary-rgb), 0.12);
  border-color: rgba(var(--mbs-brand-primary-rgb), 0.32);
}

.tasks-mobile-last-monitoring {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  line-height: 1.35;
  color: var(--bs-secondary-color);
}

.tasks-mobile-last-monitoring.is-warning {
  color: var(--bs-warning-text-emphasis, var(--bs-warning));
  font-weight: 600;
}

.tasks-mobile-last-monitoring-separator {
  opacity: 0.7;
}

.tasks-mobile-last-monitoring-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--bs-warning-text-emphasis, var(--bs-warning));
}

.tasks-mobile-schedule-last {
  display: grid;
  gap: 0.25rem;
}

.tasks-mobile-schedule-last-label {
  color: var(--bs-secondary-color);
  font-size: 0.82rem;
  line-height: 1.25;
}

.tasks-mobile-schedule-last-values {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.tasks-mobile-schedule-last-larvae,
.tasks-mobile-schedule-last-imago {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  line-height: 1.35;
}

.tasks-mobile-schedule-last-dot {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  flex: 0 0 auto;
  background: var(--bs-success);
}

.tasks-mobile-schedule-last-larvae.is-warning .tasks-mobile-schedule-last-dot {
  background: var(--bs-warning);
}

.tasks-mobile-schedule-last-larvae.is-orange .tasks-mobile-schedule-last-dot {
  background: #fd7e14;
}

.tasks-mobile-schedule-last-larvae.is-danger .tasks-mobile-schedule-last-dot {
  background: var(--bs-danger);
}

.tasks-mobile-schedule-last-imago {
  color: var(--bs-secondary-color);
}

.tasks-mobile-schedule-task-list {
  display: grid;
  gap: 0.35rem;
}

.tasks-mobile-schedule-task-kind {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tasks-mobile-schedule-task-list-title {
  font-size: 1.05rem;
  line-height: 1.2;
}

.tasks-mobile-schedule-task-items {
  display: grid;
  gap: 0.2rem;
}

.tasks-mobile-schedule-task-item {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  line-height: 1.25;
}

.tasks-mobile-schedule-task-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.32rem;
  border-radius: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.tasks-mobile-schedule-task-label {
  color: #475569;
  font-weight: 400;
}

.tasks-mobile-page--schedule .tasks-mobile-schedule-task-chip.is-initialSurvey {
  background: #dbeafe;
  color: #1d4ed8;
}

.tasks-mobile-page--schedule .tasks-mobile-schedule-task-chip.is-monitoring {
  background: #f0fdf4;
  color: #15803d;
}

.tasks-mobile-page--schedule .tasks-mobile-schedule-task-chip.is-processing {
  background: #ffedd5;
  color: #c2410c;
}

.tasks-mobile-page--schedule .tasks-mobile-schedule-task-chip.is-followUpMonitoring {
  background: #dcfce7;
  color: #15803d;
}

.tasks-mobile-page--schedule .tasks-mobile-schedule-task-chip.is-monitoringFollowUp {
  background: #ede9fe;
  color: #6d28d9;
}

.tasks-mobile-page--schedule .tasks-mobile-schedule-task-list {
  gap: 0.15rem;
}

.tasks-mobile-page--schedule .tasks-mobile-schedule-task-list-title {
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tasks-mobile-page--schedule .tasks-mobile-schedule-task-items {
  gap: 0.35rem;
}

.tasks-mobile-page--schedule .tasks-mobile-schedule-task-item {
  align-items: center;
  gap: 0.5rem;
  line-height: 1.3;
}

.tasks-mobile-task-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.tasks-mobile-note-modal-content {
  display: grid;
  gap: 0.25rem;
}

.tasks-mobile-note-modal-list {
  display: grid;
  gap: 0.75rem;
}

.tasks-mobile-note-modal-item {
  padding-top: 0.25rem;
  border-top: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.08));
}

.tasks-mobile-note-modal-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.tasks-mobile-note-modal-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.tasks-mobile-chevron {
  font-size: 1.35rem;
  line-height: 1;
  color: var(--bs-secondary-color);
}

.tasks-mobile-map {
  width: 100%;
  aspect-ratio: 5 / 2;
  border-radius: 0;
}

img.tasks-mobile-map {
  object-fit: cover;
}

.biotope-mobile-map-banner {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  overflow: hidden;
}

.tasks-mobile-map-wrap {
  position: relative;
}

.tasks-mobile-map-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  border-radius: 0;
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  pointer-events: none;
  z-index: 3;
}

.tasks-mobile-map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.28));
}

.tasks-mobile-map-pin-icon {
  width: 34px;
  height: 34px;
  color: #dc3545; /* Bootstrap danger red */
}

.tasks-mobile-map-hit {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 0;
  z-index: 4;
}

.tasks-mobile-map-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  border: 0;
  border-radius: 0;
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  text-align: center;
  padding: 1rem;
}

.monitoring-probes-mobile-summary {
  position: sticky;
  top: var(--mbs-shell-header-h, 0px);
  z-index: 6;
  margin-left: calc(-1 * var(--bs-gutter-x, 1.5rem) / 2);
  margin-right: calc(-1 * var(--bs-gutter-x, 1.5rem) / 2);
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--bs-border-color);
  border-radius: 0;
  background: var(--bs-secondary-bg);
  box-shadow: none;
}

[data-bs-theme="dark"] .inspection-mobile-summary,
[data-bs-theme="dark"] .monitoring-probes-mobile-summary {
  box-shadow: none;
}

.inspection-mobile-summary.card,
.monitoring-probes-mobile-summary.card {
  border: 0;
  border-radius: 0;
}

.inspection-mobile-summary .card-body,
.monitoring-probes-mobile-summary .card-body {
  padding: 0.6rem calc(var(--bs-gutter-x, 1.5rem) / 2) !important;
}

.monitoring-probes-footer-island {
  display: grid;
  gap: 0.5rem;
}

.monitoring-probes-footer-summary {
  display: grid;
  gap: 0.1rem;
}

.monitoring-probes-footer-total {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.monitoring-probes-footer-total-label {
  font-weight: 400;
}

.monitoring-probes-footer-total-value {
  font-variant-numeric: tabular-nums;
}

.monitoring-probes-footer-density {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.3rem;
  color: #64748b;
  font-size: 0.8125rem;
  line-height: 1.2;
  text-align: center;
}

.monitoring-probes-footer-density-value {
  font-weight: 500;
}

.monitoring-probes-footer-actions {
  display: block;
}

.monitoring-probes-footer-ghost-btn,
[data-bs-theme="light"] .monitoring-probes-footer-ghost-btn,
[data-bs-theme="dark"] .monitoring-probes-footer-ghost-btn {
  --bs-btn-color: #0b2346;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #0b2346;
  --bs-btn-hover-bg: rgba(11, 35, 70, 0.08);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #0b2346;
  --bs-btn-active-bg: rgba(11, 35, 70, 0.12);
  --bs-btn-active-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 11, 35, 70;
  --bs-btn-disabled-color: #94a3b8;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
  border-width: 0;
}

.monitoring-probes-footer-btn-hint {
  white-space: nowrap;
}

.mbs-shell-subtitle {
  margin-top: 0.15rem;
}

body.mbs-route-tasks .tasks-header-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
  max-width: min(36vw, 24rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.mbs-route-tasks .tasks-header-status.is-empty {
  visibility: hidden;
}

body.mbs-route-tasks .tasks-header-status--warning {
  color: var(--bs-warning-text-emphasis, #997404);
}

body.mbs-route-tasks .tasks-header-status--danger {
  color: var(--bs-danger-text-emphasis, #b02a37);
}

.mbs-shell-header-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
  line-height: 1.2;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mbs-shell-header-meta-primary {
  color: var(--bs-emphasis-color);
  font-weight: 700;
  white-space: nowrap;
}

.mbs-shell-header-meta-secondary {
  color: var(--bs-secondary-color);
  font-weight: 400;
  white-space: nowrap;
}

.mbs-shell-title {
  min-width: 0;
}

.monitoring-probe-accordion-list {
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-focus-border-color: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-bg: #ffffff;
  --bs-accordion-active-color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.monitoring-probe-accordion-item {
  overflow: hidden;
  background: #ffffff;
  border: 0;
  border-radius: 0 !important;
}

.monitoring-probe-accordion-item + .monitoring-probe-accordion-item {
  border-top: 1px solid #f1f5f9;
}

.monitoring-probe-accordion-button {
  padding: 0.75rem 0.95rem;
  align-items: center;
  background: #ffffff !important;
  box-shadow: none !important;
  color: #0f172a;
}

.monitoring-probe-accordion-button:not(.collapsed) {
  background: #ffffff !important;
  color: #0f172a;
  box-shadow: none !important;
}

.monitoring-probe-accordion-button:focus {
  box-shadow: none;
}

.monitoring-probe-accordion-button::after {
  margin-left: 0.75rem;
  flex-shrink: 0;
  opacity: 0.72;
}

.monitoring-probe-accordion-summary,
.monitoring-probe-accordion-main {
  min-width: 0;
}

.monitoring-probe-accordion-summary {
  padding-right: 0.25rem;
}

.monitoring-probe-accordion-side {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-left: auto;
  min-width: 0;
}

.monitoring-probe-accordion-summary > * {
  min-width: 0;
}

.monitoring-probe-accordion-title {
  font-size: 0.95rem;
  line-height: 1.2;
}

.monitoring-probe-accordion-meta {
  line-height: 1.2;
  color: #64748b !important;
  text-align: right;
  white-space: nowrap;
}

.monitoring-probe-accordion-gps-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--bs-success);
  line-height: 1;
}

.monitoring-probe-accordion-item .accordion-body {
  background: #ffffff;
  border-top: 1px solid #f8fafc;
}

.monitoring-probe-stepper-row {
  border-color: #f1f5f9 !important;
}

.monitoring-probe-stepper-btn,
[data-bs-theme="light"] .monitoring-probe-stepper-btn,
[data-bs-theme="dark"] .monitoring-probe-stepper-btn {
  --bs-btn-color: #0f172a;
  --bs-btn-bg: #f1f5f9;
  --bs-btn-border-color: #f1f5f9;
  --bs-btn-hover-color: #0f172a;
  --bs-btn-hover-bg: #e2e8f0;
  --bs-btn-hover-border-color: #e2e8f0;
  --bs-btn-active-color: #0f172a;
  --bs-btn-active-bg: #cbd5e1;
  --bs-btn-active-border-color: #cbd5e1;
  --bs-btn-focus-shadow-rgb: 148, 163, 184;
  --bs-btn-disabled-color: #94a3b8;
  --bs-btn-disabled-bg: #f8fafc;
  --bs-btn-disabled-border-color: #f8fafc;
  font-weight: 600;
}

.monitoring-probe-delete-btn,
[data-bs-theme="light"] .monitoring-probe-delete-btn,
[data-bs-theme="dark"] .monitoring-probe-delete-btn {
  --bs-btn-color: #ef4444;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #dc2626;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #b91c1c;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 239, 68, 68;
  padding-right: 0;
  padding-left: 0;
  border-width: 0;
  font-weight: 500;
}

.monitoring-probe-adult-summary-card {
  overflow: hidden;
}

.monitoring-view-section {
  min-width: 0;
}

.monitoring-view-summary-grid {
  display: grid;
  gap: 0.875rem;
}

.monitoring-view-summary-field .biotope-mobile-summary-field-value {
  color: var(--bs-emphasis-color);
  font-size: 0.95rem;
  font-weight: 500;
}

.monitoring-view-unit {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.monitoring-view-section-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--bs-body-color);
}

.monitoring-view-probes-accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-width: 0;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-inner-border-radius: 0;
}

.monitoring-view-probe-item {
  border-bottom: 1px solid #f1f5f9;
  background: transparent;
}

.monitoring-view-probe-button {
  padding: 0.875rem 0;
  color: inherit;
  background: transparent;
}

.monitoring-view-probe-button:not(.collapsed) {
  color: inherit;
  background: transparent;
  box-shadow: none;
}

.monitoring-view-probe-button::after {
  margin-left: 0.75rem;
}

.monitoring-view-probe-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}

.monitoring-view-probe-label {
  min-width: 0;
  color: var(--bs-emphasis-color);
  font-weight: 600;
}

.monitoring-view-probe-total {
  flex: 0 0 auto;
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
  white-space: nowrap;
}

.monitoring-view-probe-body {
  padding: 0 0 0.875rem;
}

.monitoring-view-probe-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem 1rem;
}

.monitoring-view-probe-details .monitoring-view-summary-field:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.mbs-shell-title-clamp-2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.2;
  max-height: 2.4em;
  font-weight: 700;
}

.inspection-mobile-summary {
  position: sticky;
  top: var(--mbs-shell-header-h, 0px);
  z-index: 6;
  margin-left: calc(-1 * var(--bs-gutter-x, 1.5rem) / 2);
  margin-right: calc(-1 * var(--bs-gutter-x, 1.5rem) / 2);
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--bs-border-color);
  border-radius: 0;
  background: var(--bs-secondary-bg);
  box-shadow: none;
}

.inspection-mobile-sections {
  gap: 20px;
}

.inspection-mobile-stage {
  display: grid;
  gap: 10px;
}

.inspection-mobile-stage-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(11, 35, 70, 0.68);
}

.inspection-mobile-stage-header-line {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  height: 1px;
  background: rgba(11, 35, 70, 0.18);
}

.inspection-mobile-stage-header-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 0;
}

.inspection-mobile-stage-header-label {
  color: #0b2346;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.inspection-mobile-stage-header-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #198754;
  line-height: 1;
  width: 0.95rem;
  flex: 0 0 0.95rem;
  visibility: hidden;
}

.inspection-mobile-stage-header-check .icon {
  width: 0.95rem;
  height: 0.95rem;
}

.inspection-mobile-stage-header.is-complete .inspection-mobile-stage-header-check {
  visibility: visible;
}

.inspection-mobile-section-card.card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  color: var(--mbs-brand-accent);
  overflow: hidden;
}

.inspection-mobile-section-body {
  display: grid;
  gap: 16px;
}

.inspection-mobile-question {
  display: grid;
  gap: 10px;
}

.inspection-mobile-question + .inspection-mobile-question {
  border-top: 1px solid #e2e8f0;
  padding-top: 16px;
}

.inspection-mobile-question-title {
  color: rgba(11, 35, 70, 0.72);
  font-size: 0.95rem;
  font-weight: 700;
}

.inspection-mobile-choice-grid > [class*="col-"] {
  display: flex;
}

.inspection-mobile-choice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  padding-left: 4px;
  padding-right: 4px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  text-align: center;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.inspection-mobile-shell-subtitle {
  font-size: 1rem;
  color: var(--bs-body-color);
  font-weight: 400;
}

.inspection-mobile-success-screen {
  gap: 0.25rem;
}

.inspection-mobile-success-icon {
  filter: drop-shadow(0 8px 20px rgba(25, 135, 84, 0.18));
}

@media (max-width: 767.98px) {
  .monitorings-form-shell-card .card-body:first-child {
    position: sticky;
    top: var(--mbs-shell-header-h, 0px);
    z-index: 6;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
  }

  [data-bs-theme="dark"] .monitorings-form-shell-card .card-body:first-child {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  }
}

/* Offline indicator */
.offline-indicator .badge {
  font-weight: 600;
}

/* Sync widget alignment */
.sync-widget {
  font-variant-numeric: tabular-nums;
}

/* Prevent sync widget from changing height (no layout shift). */
.sync-widget .sync-row {
  min-height: 44px; /* keep header height stable on state changes */
}

.sync-widget .sync-error {
  max-width: 40vw;
}

/* Bottom nav polish */
.bottom-nav .nav-link {
  border-radius: 999px;
}

/* Dropup menu inside fixed bottom nav */
.bottom-nav .bottom-nav-dropup-menu {
  width: max-content;
  min-width: 0;
  max-width: min(92vw, 22rem);
  margin-bottom: 0.25rem; /* smaller gap between menu and pill */
  /* On small mobile viewports the menu can otherwise be clipped/off-screen. */
  max-height: calc(
    100vh - var(--mbs-bottom-nav-reserve, 0px) - var(--mbs-bottom-inset, 0px) - 16px
  );
  max-height: calc(
    100dvh - var(--mbs-bottom-nav-reserve, 0px) - var(--mbs-bottom-inset, 0px) - 16px
  );
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Ensure the menu shows above the floating "+" FAB. */
  z-index: 1050;
}

.bottom-nav .bottom-nav-dropup-menu .dropdown-item {
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fast, subtle transitions (purposeful only). */
@media (prefers-reduced-motion: no-preference) {
  .fade-fast {
    transition: opacity 120ms ease, transform 120ms ease;
    will-change: opacity, transform;
  }
}

/* Touch target helper */
.touch-target {
  min-height: 44px;
}

.mbs-shell-back-btn {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
}

.mbs-shell-back-btn .icon {
  width: 1.15rem;
  height: 1.15rem;
}

/* Mobile bottom-nav: never show "More" (safety-net for stale cached JS). */
@media (max-width: 767.98px) {
  nav.bottom-nav #navMoreItem {
    display: none !important;
  }
}

/* Login page: wide logo should stay readable on narrow screens */
.mbs-login-logo-wrap {
  /* default: nothing special; mobile overrides break out of container padding */
}

.mbs-login-logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: min(420px, 100%);
  height: auto;
  max-height: 170px;
  object-fit: contain;
}

/* Mobile: let the logo touch screen edges (cancel Bootstrap container-fluid padding) */
@media (max-width: 575.98px) {
  .mbs-login-logo-wrap {
    margin-left: calc(-1 * var(--bs-gutter-x, 1.5rem) / 2);
    margin-right: calc(-1 * var(--bs-gutter-x, 1.5rem) / 2);
  }

  .mbs-login-logo {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .mbs-login-logo {
    max-height: 135px;
  }
}

/* Bottom nav: slightly denser while still tappable */
.bottom-nav .touch-target {
  min-height: 40px;
}

@media (max-width: 767.98px) {
  .app-header .mbs-shell-back-btn {
    margin-inline-start: 0.125rem;
  }

  .bottom-nav {
    --bs-navbar-padding-y: 0.35rem;
  }

  .bottom-nav .nav-link {
    --bs-nav-link-padding-y: 0.35rem;
    --bs-nav-link-padding-x: 0.5rem;
  }

  .bottom-nav .touch-target {
    min-height: 52px;
  }
}

/* Utility */
.btn-nowrap {
  white-space: nowrap;
}

/* ----------------------------
   Datepicker (vanillajs-datepicker) theme alignment
   - Keep the vendor stylesheet, but provide app-owned button and dark theme styling
     so the picker no longer depends on Bootstrap CSS variables.
----------------------------- */
.datepicker .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 2rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--fsm-line-1, #e7e5e4);
  border-radius: 0.5rem;
  background: var(--fsm-card, #ffffff);
  color: var(--fsm-foreground, #292524);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.datepicker .btn:hover,
.datepicker .btn:focus {
  background: var(--fsm-muted, #f5f5f4);
  color: var(--fsm-foreground, #292524);
  outline: none;
}

.dark .datepicker .datepicker-picker {
  background-color: var(--fsm-card, #262626);
  color: var(--fsm-foreground, #e5e5e5);
  border-color: var(--fsm-line-1, #404040);
}

.dark .datepicker .datepicker-picker .datepicker-header,
.dark .datepicker .datepicker-picker .datepicker-footer {
  background-color: transparent;
  border-color: var(--fsm-line-1, #404040);
}

.dark .datepicker .datepicker-picker .datepicker-cell {
  color: var(--fsm-foreground, #e5e5e5);
}

.dark .datepicker .datepicker-picker .datepicker-cell:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.dark .datepicker .datepicker-picker .datepicker-cell.selected,
.dark .datepicker .datepicker-picker .datepicker-cell.selected:hover {
  background-color: rgba(var(--mbs-brand-primary-rgb), 0.35);
  color: var(--mbs-brand-accent, #0b2346);
}

.dark .datepicker .datepicker-picker .datepicker-cell.today:not(.selected) {
  outline: 1px solid rgba(var(--mbs-brand-primary-rgb), 0.58);
  outline-offset: -2px;
}

/* Datepicker above app overlays when needed */
.datepicker,
.datepicker-dropdown {
  z-index: 2000 !important;
}

.schedule-planner-page {
  display: grid;
  gap: 1rem;
  max-width: 1120px;
  margin: 0 auto;
}

.schedule-planner-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.schedule-panel-card {
  min-width: 0;
  background: #ffffff;
  border: none;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.schedule-panel-card-title {
  padding: 24px 24px 12px;
  color: #0b2346;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 1px solid #e2e8f0;
}

.schedule-panel-card-body {
  display: grid;
  gap: 20px;
  padding: 24px;
}

.schedule-panel-section {
  min-width: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.schedule-panel-section--soft {
  background: transparent;
}

.schedule-panel-section-title {
  margin-bottom: 1rem;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.schedule-panel-inline-grid {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.schedule-panel-inline-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.schedule-inline-control-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: #0b2346;
  background: #eff6ff;
  border-radius: 999px;
  flex: 0 0 auto;
}

.schedule-inline-select {
  width: min(100%, 240px);
  min-width: 220px;
}

.schedule-period-controls,
.schedule-cadence-controls {
  display: grid;
  gap: 16px;
}

.schedule-period-row,
.schedule-cadence-row,
.schedule-cadence-detail-row {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

.schedule-period-range {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.schedule-period-input,
.schedule-period-adjust,
.schedule-period-nonworking,
.schedule-cadence-field,
.schedule-cadence-mini-field {
  min-width: 0;
}

.schedule-period-input {
  width: 128px;
}

.schedule-period-adjust,
.schedule-cadence-field {
  width: min(100%, 240px);
}

.schedule-period-nonworking-check {
  min-height: 38px;
  display: flex;
  align-items: center;
}

.schedule-period-adjust.is-disabled {
  opacity: 0.6;
}

.schedule-period-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.schedule-cadence-detail {
  display: grid;
  gap: 12px;
}

.schedule-cadence-day-group {
  display: grid;
  gap: 8px;
}

.schedule-choice-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.schedule-choice-pill {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  color: #475569;
  background: #ffffff;
  cursor: pointer;
  box-shadow: none;
}

.schedule-choice-pill:hover,
.schedule-choice-pill:focus,
.schedule-choice-pill:focus-visible {
  border-color: #cbd5e1;
  color: #0b2346;
  background: #ffffff;
  box-shadow: none;
}

.schedule-choice-pill.is-selected {
  border-color: #0b2346;
  background-color: #f8fafc;
  color: #0b2346;
  font-weight: 600;
}

.schedule-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 42px;
}

.schedule-mode-btn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.32rem;
  border-radius: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.schedule-mode-btn-badge.is-monitoring {
  background: #f0fdf4;
  color: #15803d;
}

.schedule-mode-btn-badge.is-processing {
  background: #fff7ed;
  color: #c2410c;
}

.schedule-mode-btn.is-active {
  border-color: #0b2346;
  background: #0b2346;
  color: #ffffff;
}

.schedule-mode-btn.is-active .schedule-mode-btn-badge.is-monitoring {
  background: rgba(240, 253, 244, 0.18);
  color: #dcfce7;
}

.schedule-mode-btn.is-active .schedule-mode-btn-badge.is-processing {
  background: rgba(255, 247, 237, 0.2);
  color: #fed7aa;
}

.schedule-inline-state-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.schedule-inline-state-badge.is-excluded {
  background: #f1f5f9;
  color: #64748b;
}

.schedule-selected-biotope.is-excluded {
  opacity: 0.5;
}

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

.schedule-segmented-btn {
  min-height: 42px;
}

.schedule-manual-date {
  flex: 1 1 180px;
  min-width: 180px;
}

.schedule-panel-actions {
  display: grid;
  gap: 0.75rem;
  padding-top: 0.25rem;
  border-top: 1px solid #e2e8f0;
}

.schedule-primary-action {
  width: max-content;
  min-width: 0;
  margin-left: auto;
  padding-inline: 32px;
  background: #0b2346;
  border-color: #0b2346;
}

@media (max-width: 991.98px) {
  .schedule-planner-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-panel-inline-grid {
    flex-wrap: wrap;
  }

  .schedule-inline-select {
    width: 100%;
    min-width: 0;
  }

  .schedule-period-input,
  .schedule-period-adjust,
  .schedule-cadence-field {
    width: 100%;
  }

  .schedule-primary-action {
    width: 100%;
  }
}

.documents-card-body {
  display: grid;
  gap: 1rem;
}

.documents-controls-shell {
  display: grid;
  gap: 0.875rem;
}

.documents-controls-top,
.documents-controls-middle,
.documents-controls-bottom {
  display: grid;
  gap: 0.875rem;
}

.documents-controls-top {
  grid-template-columns: 1fr;
}

.documents-controls-middle {
  grid-template-columns: 1fr;
  align-items: start;
}

.documents-controls-bottom {
  grid-template-columns: 1fr;
}

.documents-toolbar-card {
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.9rem 1rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.documents-toolbar-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.documents-toolbar-period,
.documents-toolbar-right {
  min-width: 0;
}

.documents-toolbar-period {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1 1 auto;
}

.documents-toolbar-team {
  flex: 0 0 auto;
  min-width: 12rem;
}

.documents-toolbar-team .documents-filter-field {
  gap: 0;
}

.documents-page .tasks-filters-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: nowrap;
  padding: 0;
  overflow: visible;
}

.documents-page .tasks-filters-primary {
  display: flex;
  align-items: center;
  gap: 0.875rem 1rem;
  flex-wrap: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.documents-page .tasks-filters-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
  flex: 0 0 auto;
}

.documents-page .tasks-filters-group--period {
  flex-wrap: nowrap;
}

.documents-page .tasks-filter-time-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1e293b;
  flex: 0 0 auto;
  margin-right: 8px;
  font-size: 14px;
  line-height: 1;
}

.documents-page .tasks-filter-separator {
  font-size: 13px;
  color: #1e293b;
  margin: 0;
  white-space: nowrap;
}

.documents-page .tasks-filter-control,
.documents-period-segment .btn,
.documents-view-toggle .btn,
.documents-status-buttons .btn,
.documents-export-toggle,
.documents-results-toolbar-btn,
.documents-select-all-btn,
.documents-clear-filters-btn {
  height: 36px;
  min-height: 36px;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  font-size: 13px;
  color: #1e293b !important;
  box-shadow: none !important;
  background-color: #fff !important;
}

.documents-page .tasks-filter-date-control {
  width: 115px;
  min-width: 115px;
  text-align: center;
  padding: 0 8px !important;
}

.documents-page .tasks-filter-team-control,
.documents-team-button {
  min-width: 12rem;
  max-width: min(22rem, calc(100vw - 2rem));
}

.documents-team-button {
  display: inline-flex;
  align-items: center;
}

.documents-period-segment .btn:hover,
.documents-view-toggle .btn:hover,
.documents-status-buttons .btn:hover,
.documents-export-toggle:hover,
.documents-results-toolbar-btn:hover,
.documents-select-all-btn:hover,
.documents-clear-filters-btn:hover,
.documents-page .tasks-filter-control:hover {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  transform: none;
}

.documents-period-segment .btn.active,
.documents-view-toggle .btn.active,
.documents-status-buttons .btn.active {
  background-color: #6b7280 !important;
  border-color: #6b7280 !important;
  color: #fff !important;
}

.documents-toolbar-right {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.documents-control-panel {
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.9rem;
  background: #fff;
  box-shadow: none;
}

.documents-control-panel-period {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.documents-panel-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.7rem;
  background: #f8fafc;
  color: #475569;
  box-shadow: none;
}

.documents-panel-icon-inline {
  width: 1.8rem;
  height: 1.8rem;
}

.documents-period-panel-body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.75rem;
}

.documents-tools-view,
.documents-tools-actions,
.documents-action-buttons {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.documents-control-panel-tools,
.documents-control-panel-meta {
  display: grid;
  gap: 0.75rem;
  align-content: center;
}

.documents-tools-view,
.documents-tools-actions {
  justify-content: flex-end;
}

.documents-control-panel-meta {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: stretch;
  gap: 1rem;
  border-color: #e2e8f0;
  background: #fff;
}

.documents-control-panel-meta-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.documents-date-range {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.75rem;
}

.documents-date-field {
  min-width: 0;
  flex: 1 1 150px;
}

.documents-date-field .form-control {
  font-weight: 500;
}

.documents-toolbar-input {
  min-width: 0;
  background: #fff !important;
  border-color: #e2e8f0 !important;
}

.documents-date-separator {
  color: var(--bs-secondary-color);
  font-weight: 600;
}

.documents-control-panel-team,
.documents-control-panel-action-type,
.documents-control-panel-status {
  min-height: 100%;
}

.documents-filters-card {
  padding-block: 0.8rem;
}

.documents-filters-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: start;
}

.documents-filter-slot-status {
  min-width: 0;
  overflow: hidden;
}

.documents-control-panel-location {
  grid-column: span 2;
  position: relative;
  background: #f8fafc;
  border-color: #e2e8f0;
  box-shadow: none;
}

.documents-control-panel-location::before {
  content: none;
}

.documents-location-shell {
  padding-left: 0;
}

.documents-location-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.documents-filter-field {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.documents-filter-field-compact {
  gap: 0.5rem;
}

.documents-picker-menu {
  z-index: 1000;
  margin-top: 0.25rem;
  max-height: 240px;
  overflow: auto;
  box-shadow: 0 12px 24px -18px rgba(15, 23, 42, 0.28);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.documents-picker-button-wrap .documents-picker-menu {
  min-width: 16rem;
  max-width: min(22rem, calc(100vw - 2rem));
}

.documents-picker-option-selected {
  font-weight: 600;
}

.documents-picker-option-check {
  min-width: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.documents-picker-leading {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  color: var(--bs-secondary-color);
  pointer-events: none;
}

.documents-picker-input-with-icon {
  padding-left: 2.35rem;
}

.documents-picker-button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2rem;
}

.documents-picker-button-icon {
  display: inline-flex;
  align-items: center;
  color: var(--bs-secondary-color);
  flex: 0 0 auto;
}

.documents-picker-button-label {
  flex: 1 1 auto;
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.documents-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 1.5rem;
}

.documents-picker-chips:empty {
  display: none;
}

.documents-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.62rem;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: inherit;
  font-size: 0.875rem;
  font: inherit;
  cursor: pointer;
  box-shadow: none;
}

.documents-picker-chip:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.documents-picker-chip-icon {
  display: inline-flex;
  align-items: center;
}

.documents-selection-summary,
.documents-action-summary {
  min-width: 0;
  margin: 0;
  text-align: left;
}

.documents-selection-summary {
  color: var(--bs-emphasis-color);
  font-weight: 600;
}

.documents-status-filter {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.documents-status-buttons {
  width: 100%;
  min-width: 0;
}

.documents-status-buttons .btn {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 0.45rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.documents-results {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  background: #fff;
}

.documents-results-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.documents-results-toolbar-meta {
  min-width: 0;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569 !important;
  font-weight: 600;
}

.documents-results-toolbar-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.documents-list-view {
  display: grid;
  gap: 0;
}

.documents-group {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.documents-group + .documents-group {
  margin-top: 0;
}

.documents-group-children {
  display: grid;
  gap: 0;
  padding: 0;
}

.documents-group.documents-group-municipality,
.documents-group.documents-group-biotope {
  border-radius: 0;
}

.documents-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 0.85rem 0.9rem;
  font-weight: 600;
  border-radius: 0;
}

.documents-group-toggle:hover {
  background: #f8fafc;
}

.documents-group-toggle-icon {
  flex: 0 0 auto;
}

.documents-group-toggle-label {
  min-width: 0;
  flex: 1 1 auto;
}

.documents-group-count {
  margin-left: auto;
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}

.documents-tree-toggle-btn,
.documents-biotope-title-btn {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
}

.documents-tree-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
}

.documents-tree-toggle-btn:hover,
.documents-biotope-title-btn:hover {
  color: inherit;
}

.documents-group-region > .documents-group-toggle {
  background: #f8fafc;
  font-weight: 700;
  padding-left: 0.9rem;
  border-bottom: 1px solid #e2e8f0;
}

.documents-group-municipality > .documents-group-toggle,
.documents-group-biotope > .documents-biotope-row,
.documents-actions-table-wrap {
  position: relative;
}

.documents-group-municipality > .documents-group-toggle {
  padding-left: 1.5rem;
  background: #fff;
}

.documents-group-biotope > .documents-biotope-row {
  padding-left: 3rem;
  background: transparent;
  transition: background-color 150ms ease;
}

.documents-group-biotope > .documents-biotope-row:hover {
  background: #f8fafc;
}

.documents-group-municipality > .documents-group-toggle::before,
.documents-group-biotope > .documents-biotope-row::before,
.documents-actions-table-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e2e8f0;
  pointer-events: none;
}

.documents-group-municipality > .documents-group-toggle::before {
  left: 0.75rem;
}

.documents-group-biotope > .documents-biotope-row::before {
  left: 2.25rem;
}

.documents-actions-table-wrap::before {
  left: 4.5rem;
}

.documents-group-toggle-municipality {
  font-weight: 600;
}

.documents-group-toggle-biotope {
  flex: 1 1 auto;
}

.documents-biotope-row,
.documents-select-biotope,
.documents-matrix-biotope {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.documents-biotope-row {
  justify-content: flex-start;
  padding-right: 0.9rem;
}

.documents-select-biotope {
  font-weight: 500;
  white-space: nowrap;
  padding-right: 0.9rem;
  position: relative;
  z-index: 1;
}

.documents-select-biotope-axis {
  flex: 0 0 auto;
  padding-right: 0;
}

.documents-checkbox-spacer {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
}

.documents-biotope-title-btn {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.documents-biotope-heading {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}

.documents-biotope-heading-main {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.documents-biotope-heading-compact {
  width: 100%;
}

.documents-biotope-heading-compact .documents-biotope-heading-main,
.documents-biotope-heading-compact .documents-biotope-code-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.documents-biotope-place {
  color: #15803d;
}

.documents-biotope-descriptor,
.documents-biotope-heading-separator {
  color: var(--bs-emphasis-color);
}

.documents-biotope-code-meta {
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 500;
}

.documents-matrix-biotope {
  align-items: flex-start;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.documents-matrix-biotope .documents-biotope-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.documents-matrix-biotope .documents-biotope-heading-main {
  overflow-wrap: normal;
}

.documents-checkbox {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0;
  cursor: pointer;
  background-color: var(--bs-secondary-bg);
  border-color: #000;
  box-shadow: none;
}

.documents-checkbox:checked {
  background-color: var(--bs-secondary-bg);
  border-color: #000;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='M4.5 10.5 8.2 14 15.5 6.5'/%3e%3c/svg%3e");
}

.documents-checkbox:focus {
  border-color: #000;
  box-shadow: 0 0 0 0.18rem rgba(0, 0, 0, 0.12);
}

.documents-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.documents-checkbox-cell {
  width: 2.5rem;
  text-align: left;
  padding-left: 0.6rem;
  position: relative;
  z-index: 1;
}

.documents-checkbox-cell .documents-checkbox {
  margin-inline: 0;
}

/* Normalize native checkbox painting across themes so unchecked boxes never
   fall back to browser/OS dark fills. Keep document matrix checkboxes opt-in. */
input[type="checkbox"]:not(.documents-checkbox) {
  accent-color: var(--bs-primary);
  color-scheme: light;
  background-color: #fff;
  border-color: var(--bs-border-color);
}

input[type="checkbox"]:not(.documents-checkbox):checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.documents-select-column {
  width: 2.5rem;
}

.documents-actions-table {
  margin-bottom: 0;
}

.documents-actions-table-wrap {
  padding-left: 4.5rem;
  background: #fff;
}

.documents-actions-table thead th {
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #f1f5f9;
}

.documents-actions-table td {
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
}

.documents-actions-table tbody tr:last-child td {
  border-bottom: 0;
}

.documents-actions-table th {
  white-space: nowrap;
}

.documents-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.32rem;
  border-radius: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.documents-badge.is-monitoring {
  background: #f0fdf4;
  color: #15803d;
}

.documents-badge.is-processing {
  background: #ffedd5;
  color: #c2410c;
}

.documents-badge.is-inspection {
  background: #dcfce7;
  color: #15803d;
}

[data-bs-theme="dark"] .documents-badge.is-monitoring {
  background: rgba(21, 128, 61, 0.22);
  color: #86efac;
}

[data-bs-theme="dark"] .documents-badge.is-processing {
  background: rgba(194, 65, 12, 0.24);
  color: #fdba74;
}

[data-bs-theme="dark"] .documents-badge.is-inspection {
  background: rgba(21, 128, 61, 0.24);
  color: #86efac;
}

.documents-protocol-btn {
  border: 0;
  background: transparent;
  color: var(--bs-secondary-color);
  box-shadow: none;
  border-radius: 0.7rem;
}

.documents-protocol-btn:hover,
.documents-protocol-btn:focus {
  background: rgba(148, 163, 184, 0.16);
  color: var(--bs-emphasis-color);
  box-shadow: none;
}

.documents-protocol-btn:disabled {
  background: transparent;
}

.documents-export-menu {
  position: relative;
}

.documents-export-menu > summary {
  list-style: none;
}

.documents-export-menu > summary::-webkit-details-marker {
  display: none;
}

.documents-export-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #1e293b;
  box-shadow: none;
}

.documents-export-toggle-caret {
  display: inline-flex;
  align-items: center;
}

.documents-export-menu.is-disabled > summary {
  pointer-events: none;
  opacity: 0.65;
}

.documents-export-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  min-width: 15rem;
  padding: 0.35rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  background: var(--bs-body-bg);
  z-index: 1001;
  box-shadow: 0 18px 32px -24px rgba(15, 23, 42, 0.45);
}

.documents-export-menu-item {
  border-radius: 0.5rem;
}

.documents-export-loading {
  background: #f8f9fa;
  border-radius: 0.5rem 0.5rem 0 0;
}

.documents-meta-pill {
  padding: 0.55rem 0.75rem;
  border-radius: 0.85rem;
  border: 1px solid #e2e8f0;
  background: #fff;
}

.documents-meta-pill-selection {
  background: #f8fafc;
  flex: 0 0 auto;
}

.documents-meta-pill-summary {
  min-width: 0;
  flex: 1 1 22rem;
}

.documents-select-all-btn {
  border-color: #e2e8f0;
  background: #fff;
}

.documents-clear-filters-btn {
  border-color: rgba(148, 163, 184, 0.24);
  background: transparent;
}

.documents-matrix-shell {
  overflow: auto;
  --documents-matrix-object-col-width: 320px;
}

.documents-matrix-table {
  min-width: 980px;
  margin-bottom: 0;
}

.documents-matrix-sticky {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bs-card-bg);
  width: var(--documents-matrix-object-col-width);
  min-width: var(--documents-matrix-object-col-width);
  max-width: var(--documents-matrix-object-col-width);
  overflow: hidden;
  box-sizing: border-box;
}

.documents-matrix-group-row td {
  background: rgba(var(--mbs-brand-primary-rgb), 0.08);
}

.documents-matrix-group-row.is-municipality td {
  background: rgba(var(--mbs-brand-primary-rgb), 0.05);
}

.documents-matrix-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-height: 1.75rem;
}

.documents-week-current {
  box-shadow: inset 0 0 0 2px rgba(var(--mbs-brand-primary-rgb), 0.34);
}

.documents-empty-state {
  margin-bottom: 0;
}

@media (max-width: 1399.98px) {
  .documents-page .tasks-filters-toolbar,
  .documents-page .tasks-filters-primary {
    flex-wrap: wrap;
  }

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

  .documents-control-panel-meta {
    grid-column: 1 / -1;
  }
}

@media (max-width: 991.98px) {
  .documents-location-grid,
  .documents-filters-grid {
    grid-template-columns: 1fr;
  }

  .documents-toolbar-main,
  .documents-control-panel-period,
  .documents-page .tasks-filters-primary,
  .documents-period-panel-body {
    flex-direction: column;
    align-items: stretch;
  }

  .documents-date-range {
    flex-direction: column;
    align-items: stretch;
  }

  .documents-toolbar-team {
    min-width: 0;
  }

  .documents-tools-view,
  .documents-tools-actions {
    justify-content: flex-start;
  }

  .documents-control-panel-meta {
    grid-template-columns: 1fr;
  }

  .documents-control-panel-meta {
    justify-items: start;
  }

  .documents-selection-summary,
  .documents-action-summary {
    text-align: left;
  }

  .documents-results-toolbar {
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
  }

  .documents-results-toolbar-actions {
    width: 100%;
  }

  .documents-results-toolbar-actions .btn {
    flex: 1 1 0;
  }

  .documents-group-municipality > .documents-group-toggle {
    padding-left: 1.1rem;
  }

  .documents-group-biotope > .documents-biotope-row {
    padding-left: 1.8rem;
  }

  .documents-biotope-row,
  .documents-matrix-biotope {
    gap: 0.4rem;
  }

  .documents-actions-table-wrap {
    padding-left: 2.6rem;
  }

  .documents-group-municipality > .documents-group-toggle::before {
    left: 0.45rem;
  }

  .documents-group-biotope > .documents-biotope-row::before {
    left: 1.2rem;
  }

  .documents-actions-table-wrap::before {
    left: 2rem;
  }

  .documents-export-menu,
  .documents-export-toggle {
    width: 100%;
  }

  .documents-export-menu-list {
    left: 0;
    right: auto;
    width: 100%;
  }
}