/* 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);
}

/* Figma dismiss/close X (159:2210) — 21×21, stroke 2, #273942 */
.fsm-dismiss-icon {
  display: block;
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  line-height: 0;
}

/* 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 {
  touch-action: manipulation;
}

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

/* Shared overlay root (ui/components/overlay.js): its `z-[1100]` utility is missing from the
   compiled Tailwind bundle, so modals fell back to z-index:auto under any z-indexed page chrome
   (e.g. sticky headers/tabs). Pin the stacking here; a Tailwind rebuild would also emit it. */
[data-fsm-overlay-root="1"] {
  z-index: 1100;
}

/* Visible, consistent keyboard focus without relying on legacy Bootstrap compat styles. */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(255, 203, 5, 0.35);
}

/* 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;
  }
}

/* ----------------------------
   Legacy token bridge for older CSS blocks
   - New routed UI should consume FSM semantic tokens directly.
   - These `--bs-*` aliases remain only so legacy page CSS can resolve against
     the real app theme driven by `html.dark`.
----------------------------- */
: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: 4rem;
  /* 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));
  /* Figma FSM mobile UI components (41:23): shared chrome nomenclature. */
  --fsm-mobile-header-h: 160px;
  /* Control Header / Inbox: 160 includes mock status y=36; body below status is 124. */
  --fsm-mobile-header-status-h: 36px;
  --fsm-mobile-header-body-h: 124px;
  --fsm-job-profile-header-h: 238px;
  --fsm-visit-dock-h: 112px;
  --fsm-visit-dock-h-datetime: 176px;
  --fsm-visit-dock-action-h: 54px;
  --fsm-visit-dock-call-w: 64px;
  --fsm-visit-dock-primary-w: 200px;

  /* 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);

  /* FSM semantic palette aligned to mobile Schedule tasks */
  --fsm-primary-rgb: 11, 35, 70;
  --fsm-highlight-rgb: 255, 203, 5;
  --fsm-background: #f7f9fc;
  --fsm-foreground: var(--mbs-brand-accent);
  --fsm-primary: var(--mbs-brand-accent);
  --fsm-primary-hover: var(--mbs-brand-secondary);
  --fsm-primary-foreground: #ffffff;
  --fsm-line-1: #d9e4ef;
  --fsm-muted: #eef3f8;
  --fsm-muted-foreground: #6c7c92;
  --fsm-card: #ffffff;
  --fsm-overlay: rgba(255, 255, 255, 0.94);
  --fsm-navbar: rgba(255, 255, 255, 0.96);
  --fsm-navbar-border: rgba(var(--fsm-primary-rgb), 0.1);
  --fsm-highlight: var(--mbs-brand-primary);
  --fsm-highlight-hover: #f2be00;
  --fsm-highlight-foreground: #ffffff;
  --fsm-state-confirmed: #9fc8ff;
  --fsm-state-unconfirmed: #aab5c4;
  --fsm-state-completed: #22c55e;
  --fsm-state-completed-surface: rgba(220, 252, 231, 0.82);
  --fsm-destructive: #ef4444;

  /* Runtime semantic aliases used by compiled Tailwind utilities */
  --color-background: var(--fsm-background);
  --color-foreground: var(--fsm-foreground);
  --color-primary: var(--fsm-primary);
  --color-primary-hover: var(--fsm-primary-hover);
  --color-primary-foreground: var(--fsm-primary-foreground);
  --color-line-1: var(--fsm-line-1);
  --color-muted: var(--fsm-muted);
  --color-muted-foreground: var(--fsm-muted-foreground);
  --color-card: var(--fsm-card);
  --color-card-line: var(--fsm-line-1);
  --color-overlay: var(--fsm-overlay);
  --color-navbar: var(--fsm-navbar);
  --color-navbar-border: var(--fsm-navbar-border);
  --color-destructive: var(--fsm-destructive);
  --color-table-line: var(--fsm-line-1);
}

.dark {
  --fsm-background: #0b2346;
  --fsm-foreground: #f5f7fb;
  --fsm-primary: var(--fsm-highlight);
  --fsm-primary-hover: var(--fsm-highlight-hover);
  --fsm-primary-foreground: var(--mbs-brand-accent);
  --fsm-line-1: rgba(255, 255, 255, 0.12);
  --fsm-muted: #123159;
  --fsm-muted-foreground: rgba(255, 255, 255, 0.72);
  --fsm-card: #102b52;
  --fsm-overlay: rgba(16, 43, 82, 0.94);
  --fsm-navbar: rgba(11, 35, 70, 0.96);
  --fsm-navbar-border: rgba(255, 255, 255, 0.08);
  --fsm-highlight-foreground: var(--mbs-brand-accent);
  --fsm-state-confirmed: #9fc8ff;
  --fsm-state-unconfirmed: #9aa7ba;
  --fsm-state-completed: #4ade80;
  --fsm-state-completed-surface: rgba(34, 197, 94, 0.22);
}

:root {
  --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);
}

.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;
}

/* Extracted to `assets/styles/shell.css`. */

.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;
  }
}

/* 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);
}

.dark .mbs-app-lock-backdrop {
  background: rgba(0, 0, 0, 0.55);
}

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

/* Extracted shell/component/legacy CSS to `assets/styles/**`. */

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

.monitoring-finish-primary-btn,
.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(--fsm-primary);
  border-color: var(--fsm-primary);
  color: var(--fsm-primary-foreground);
}

.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;
}

/* 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);
  }
}

/* Job Profile "Планирай" drawer: slides up from the bottom of the screen, staying
   beneath the floating footer cockpit (see .cursor task 869e20gng). */
@media (prefers-reduced-motion: no-preference) {
  .job-profile-planning-enter {
    animation: job-profile-planning-slide-up 280ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@keyframes job-profile-planning-slide-up {
  from {
    transform: translateY(28px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Job Profile base layout: the summary overlays the map, while the tabs sit
   below the 170px map surface as shown in the Figma profile header (node
   1207:2489 — Map thumb 170 + Subtract overlay 110, 60px left visible so the
   pin/nav button read as a bottom map strip).

   Default mode: sticky island through the view switcher (Figma Header
   1207:2489 — 412×238, white/90, bottom radius 24, soft shadow). Body cards
   scroll underneath. Planning mode overrides back to relative inside its
   non-scrolling flex shell (170px, tabs omitted). */
.job-profile-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
  box-sizing: border-box;
  height: var(--fsm-job-profile-header-h);
  min-height: var(--fsm-job-profile-header-h);
  border: 0;
  border-radius: 0 0 24px 24px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
  /* Promote a compositing layer so iOS Safari keeps sticky + overlay clip. */
  transform: translateZ(0);
  /* Map 170 + gap 9 + selector 50 + pad 9 = 238. */
  padding-bottom: 9px;
}

.job-profile-header .job-profile-map {
  height: 170px;
  border-radius: 0 0 24px 24px;
  isolation: isolate;
  /* Force iOS WebKit to clip the Maps canvas to this rounded host. */
  -webkit-mask-image: linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000);
}

/* Only the bottom 60px of the 170px map surface is visible (the top 110px
   sits under the translucent header-summary overlay); the fallback graphic
   only needs to render within that visible band. */
.job-profile-map-visible {
  top: 110px;
}

/* The live Google Maps instance must render taller than the visible 60px
   band and be shifted so its true bottom edge — where Google's mandatory
   attribution strip and logo always anchor, regardless of container size —
   lands below the header's overflow-hidden cutoff (170px). Otherwise
   shrinking the map div to 60px just puts that attribution row inside the
   visible strip instead of hiding it. The offset keeps the map's own
   vertical center aligned with the middle of the visible band (140px) so
   the marker still reads centered there. */
.job-profile-map-live-surface {
  top: -50px;
  height: 400px;
  overflow: hidden;
  isolation: isolate;
}

/* Figma "Nav button" (1207:2491): 30px circle, top:119 / right:20 within the
   170px map — 9px into the visible 110–170 strip. */
.job-profile-map-nav-btn {
  position: absolute;
  top: 119px;
  right: 20px;
  z-index: 10;
  width: 30px;
  height: 30px;
}

.job-profile-header-summary {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  box-sizing: border-box;
  min-height: 110px;
  align-items: center;
  padding: 12px 20px 12px 32px;
  border-radius: 0 0 24px 24px;
  background: rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.job-profile-header-summary__row {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: stretch;
  gap: 8px;
}

.job-profile-header-back {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: center;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #0b2346;
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
}

.job-profile-header-back:hover,
.job-profile-header-back:focus-visible {
  background: rgba(11, 35, 70, 0.06);
  outline: none;
}

.job-profile-header-back__icon {
  display: block;
  width: 10.44px;
  height: 18.97px;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  object-fit: contain;
  object-position: center;
}

.job-profile-header-summary__main {
  display: grid;
  min-width: 0;
  gap: 0;
  line-height: normal;
}

.job-profile-header-time {
  color: #6b7280;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.job-profile-header-place {
  margin-top: 2px;
  color: #0b2346;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.job-profile-header-company,
.job-profile-header-address {
  margin-top: 2px;
  color: #273942;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

.job-profile-header-summary__meta {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 4px;
}

.job-profile-header-job-number {
  margin-top: auto;
  color: #0b2346;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  text-align: right;
}

/* Figma "Status Stripe" (130:424): 10×105, clipped to the 110px overlay.
   In-range bottom-left radius (not 999px) so iOS Safari paints a pill cap
   instead of a rectangle. Color follows the task status the user tapped
   from (see fsm-schedule-job-card--* accents). */
.job-profile-status-rail {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 10px;
  height: 105px;
  border-radius: 0 0 0 10px;
  background: #0b2346;
  pointer-events: none;
}

.job-profile-status-rail--unconfirmed { background: #6b7280; }
.job-profile-status-rail--inquiry { background: #ffcb05; }
.job-profile-status-rail--cancelled { background: #f47873; }

.job-profile-receivables-badge {
  background: #ffe78f;
}

.job-profile-receivables-badge__count {
  background: #f8fafc;
}

.job-profile-header .job-profile-tabs {
  position: relative;
  z-index: 3;
  margin-top: 9px;
  padding: 0 15px;
}

/* Figma body starts immediately under the 238px header (1207:2489). */
#jobProfilePageRoot:not(.job-profile-page--planning) {
  gap: 0;
  padding-bottom: 0.75rem;
  background: #fbfcfd;
}

.job-profile-content:not(.job-profile-content--planning) {
  gap: 0;
  padding-top: 5px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 5px;
}

.job-profile-content:not(.job-profile-content--planning) > section {
  margin: 5px 0;
  padding: 4px 32px 4px 32px;
  border: 0;
  border-radius: 18px;
  box-shadow: none;
  background: #ffffff;
  color: #0b2346;
}

.job-profile-content:not(.job-profile-content--planning) > section h2 {
  margin: 0;
  color: #0b2346;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.job-profile-content:not(.job-profile-content--planning) > section p,
.job-profile-content:not(.job-profile-content--planning) > section .text-sm {
  color: #0b2346;
  line-height: 25px;
}

.job-profile-content:not(.job-profile-content--planning) .job-profile-leader-dot {
  flex: 1 1 auto;
  min-width: 1rem;
  height: 0;
  margin: 0 2px 3px;
  border: 0;
  border-bottom: 1px dotted #6b7280;
}

.job-profile-default-call {
  width: 4.375rem;
  height: 3.75rem;
  border-radius: 1.5rem;
  background: color-mix(in srgb, var(--fsm-state-confirmed, #9fc8ff) 42%, var(--fsm-card, #ffffff));
  color: var(--fsm-primary, #0b2346);
}

.job-profile-default-plan {
  height: 3.75rem;
  min-width: 0;
  border-radius: 1.5rem;
  background: #006ef5;
}

.job-profile-default-plan:hover,
.job-profile-default-plan:focus {
  background: #005dcc;
}

footer.form-footer:has(.job-profile-default-footer) {
  left: 0;
  right: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}

/* Shared calendar job pills (1-day planning + 3-day reschedule). Figma rail+face
   stack: ~12px accent under a covering face — never a thin border-left strip. */
.fsm-calendar-job-pill {
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 12px;
}

.fsm-calendar-job-pill--other {
  display: flex;
  align-items: stretch;
  border: 1px solid #e2e8f0;
  background: #fbfbfb;
  color: #0b2346;
  box-shadow: none;
}

.fsm-calendar-job-pill__accent {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 1px;
  z-index: 0;
  width: 12px;
  border-radius: 11px 0 0 11px;
  background: #0b2346;
}

.fsm-calendar-job-pill--unconfirmed .fsm-calendar-job-pill__accent {
  background: #5e6a70;
}

.fsm-calendar-job-pill__face {
  position: absolute;
  z-index: 1;
  inset: 1px 1px 1px 7px;
  border-radius: 11px;
  background: #fbfbfb;
}

.fsm-calendar-job-pill__label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0 8px 0 18px;
  overflow: hidden;
  color: #0b2346;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  word-break: break-word;
}

.fsm-calendar-job-pill__title {
  font-weight: 700;
}

.fsm-calendar-job-pill__suffix {
  font-weight: 400;
}

.fsm-calendar-job-pill--current {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0.5px solid #0b2346;
  background: #0b2346;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.fsm-calendar-job-pill__label--current {
  flex: 1 1 auto;
  align-self: stretch;
  justify-content: center;
  height: 100%;
  padding-left: 14px;
  color: #ffffff;
}

.fsm-calendar-job-pill__grip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  color: #f9fafb;
  opacity: 0.95;
}

/* Job Profile planning view — designer “islands” model:
   (1) Top chrome island (header 170px, no tabs) and bottom visit-dock stay put.
   (3) Neutral leftover between them is never invaded.
   (2) Hour timeline is one frameless block whose height is the leftover
       flex space — own overflow-y scroll, no page scroll. */
.job-profile-page-main--planning {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 0 !important;
  height: -webkit-fill-available;
  max-height: -webkit-fill-available;
  height: calc(100vh - var(--fsm-form-footer-reserve, 0px));
  max-height: calc(100vh - var(--fsm-form-footer-reserve, 0px));
  height: calc(100svh - var(--fsm-form-footer-reserve, 0px));
  max-height: calc(100svh - var(--fsm-form-footer-reserve, 0px));
}

body:has(.job-profile-page-main--planning) {
  overflow: hidden;
}

.job-profile-page-main--planning > .job-profile-page--planning {
  flex: 1 1 auto;
  min-height: 0;
}

.job-profile-page--planning {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #fbfcfd;
  padding-bottom: 0;
}

.job-profile-page--planning .job-profile-header {
  position: relative;
  top: auto;
  z-index: 1;
  flex: 0 0 170px;
  height: 170px;
  min-height: 170px;
  max-height: 170px;
  margin: 0;
  padding-bottom: 0;
  border-radius: 0 0 18px 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
}

.job-profile-page--planning .job-profile-header-summary {
  min-height: 105px;
}

.job-profile-page--planning .job-profile-map {
  height: 170px;
}

.job-profile-page--planning .job-profile-map-visible {
  top: 105px;
}

.job-profile-page--planning .job-profile-map-nav-btn {
  top: 119px;
}

.job-profile-page--planning .job-profile-tabs {
  display: none;
}

.job-profile-content--planning {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin: 9px 0 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}

.job-profile-planning-sheet {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  padding: 21px 0 0;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

/* Island (1): fixed chrome — opaque so zone (2) cannot paint through it. */
.job-profile-planning-sheet-chrome {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  background: #ffffff;
  padding-bottom: 8px;
}

.job-profile-planning-sheet-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 48px;
}

.job-profile-planning-sheet-title {
  margin: 0;
  color: #0b2346;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.21;
  text-align: center;
}

.job-profile-planning-sheet-close {
  position: absolute;
  top: 50%;
  right: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #273942;
  line-height: 0;
  transform: translateY(-50%);
}

.job-profile-planning-sheet-close .fsm-dismiss-icon {
  display: block;
  width: 21px;
  height: 21px;
}

.job-profile-planning-sheet-body {
  display: grid;
  gap: 4px;
}

.job-profile-planning-card {
  padding: 0 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.job-profile-planning-card h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.21;
  color: #0b2346;
}

.job-profile-planning-notes-card p {
  margin-top: 8px;
  color: #0b2346;
  font-size: 14px;
  line-height: 25px;
}

.job-profile-planning-when-card {
  padding-top: 0;
}

.job-profile-planning-when-row {
  margin-top: 0;
  line-height: 25px;
}

.job-profile-planning-when-card h2 + .job-profile-planning-when-row {
  margin-top: 2px;
}

/* Zone (2): height = leftover flex space between chrome island and dock island.
   Own scroll only; overscroll contained so pills never enter Switzerland (3). */
.job-profile-planning-timeline-scroll {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0 -20px;
  padding: 4px 0 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  scrollbar-width: none;
}

.job-profile-planning-timeline-scroll::-webkit-scrollbar {
  display: none;
}

.job-profile-planning-timeline-scroll--dragging {
  overscroll-behavior: none;
  overflow-anchor: none;
  touch-action: none;
}

.job-profile-planning-hour-label {
  left: 24px;
  width: 50px;
  color: #0b2346;
  font-size: 14px;
  line-height: 25px;
  text-align: left;
}

.job-profile-planning-hour-line {
  left: 81px;
  right: 20px;
  border-color: #cbd5e1;
}

.job-profile-planning-pill--other {
  left: 94px;
  right: 102px;
  z-index: 1;
}

.job-profile-planning-pill--current {
  left: 110px;
  right: 58px;
  z-index: 2;
  min-height: 47px;
  touch-action: none;
  user-select: none;
}

.job-reschedule-pill--current {
  touch-action: none;
  user-select: none;
}

footer.form-footer:has(.job-profile-planning-footer) {
  left: 0;
  right: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}

.job-profile-planning-footer .fsm-visit-action-dock__actions {
  justify-content: center;
  max-width: 278px;
  margin-inline: auto;
}

/* Figma 182:479 planning confirm is Brand/Primary navy — not the schedule blue CTA.
   Size comes from the shared compact dock (64×54 / 200×54). */
.job-profile-planning-footer .fsm-visit-action-dock__action--primary,
.job-profile-planning-footer .fsm-visit-action-dock__action--primary:hover,
.job-profile-planning-footer .fsm-visit-action-dock__action--primary:focus-visible {
  background: #0b2346;
  color: #ffffff;
}

/* Figma system modals (confirm without call / unsaved / pick contact).
   Literal top 390px for ALL variants (Figma 540:1402). Never move the top to
   clear the visit dock — the dock sits behind the scrim. Short viewports only
   shrink max-height and scroll inside the card. */
.fsm-system-modal-root {
  --fsm-system-modal-height: 286px;
  --fsm-system-modal-top: 390px;
  --fsm-system-modal-bottom-gap: 24px;
  /* Above form-footer (1030) / FAB (1040) so dock never covers the dialog. */
  z-index: 1100 !important;
  background: rgba(0, 0, 0, 0.4) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.fsm-system-modal-root > .fsm-system-modal-dialog {
  position: absolute;
  top: var(--fsm-system-modal-top);
  left: 50%;
  transform: translateX(-50%);
  width: 342px;
  max-width: calc(100vw - 24px);
  margin: 0;
  transition: opacity 500ms ease-out;
}

.fsm-system-modal-dialog--tall {
  --fsm-system-modal-height: 374px;
}

.fsm-system-modal-content {
  overflow: hidden;
  border: 0 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25) !important;
  height: var(--fsm-system-modal-height);
  min-height: 0;
  max-height: min(
    var(--fsm-system-modal-height),
    calc(100dvh - var(--fsm-system-modal-top) - var(--fsm-system-modal-bottom-gap))
  );
}

.fsm-system-modal-body {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.fsm-system-modal__title {
  margin: 0;
  padding: 23px 53px 0;
  color: #0b2346;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.21;
  text-align: center;
  white-space: pre-line;
}

.fsm-system-modal__title--unsaved {
  padding: 0 65px;
}

.fsm-system-modal__title--pick {
  padding: 23px 53px 0;
  flex-shrink: 0;
}

.fsm-system-modal__detail {
  margin: 0;
  padding: 18px 23px 0;
  color: #0b2346;
  text-align: center;
}

.fsm-system-modal__place {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.fsm-system-modal__when {
  margin: 0;
  font-size: 14px;
  line-height: 24px;
}

.fsm-system-modal__when-prefix {
  font-weight: 400;
}

.fsm-system-modal__when-date {
  font-weight: 700;
}

.fsm-system-modal__when-weekday {
  font-weight: 500;
}

.fsm-system-modal__when-time {
  font-weight: 700;
}

.fsm-system-modal__scope {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  align-self: center;
  margin: 14px auto 0;
  min-height: 32px;
  padding: 0 12px 0 16px;
  border-radius: 24px;
  color: #273942;
  font-size: 14px;
  font-weight: 400;
  line-height: 25px;
  white-space: nowrap;
}

.fsm-system-modal__scope--once {
  background: #f8fafc;
}

.fsm-system-modal__scope--all {
  background: rgba(11, 35, 70, 0.12);
  color: #0b2346;
  font-weight: 700;
}

.fsm-system-modal__scope-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #0b2346;
}

.fsm-system-modal__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 16px 34px 23px;
}

.fsm-system-modal__actions--unsaved {
  padding: 16px 28px 23px;
  gap: 14px;
}

.fsm-system-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 60px;
  min-height: 60px;
  padding: 0 12px;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  overflow: visible;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.fsm-system-modal__btn--secondary {
  width: 140px;
  border: 1px solid #273942;
  background: transparent;
  color: #273942;
}

.fsm-system-modal__btn--secondary:hover,
.fsm-system-modal__btn--secondary:focus {
  background: rgba(39, 57, 66, 0.06);
}

.fsm-system-modal__btn--primary {
  width: 140px;
  border: 0;
  background: #006ef5;
  color: #ffffff;
  font-weight: 700;
  font-size: 17px;
}

.fsm-system-modal__btn--primary:hover,
.fsm-system-modal__btn--primary:focus {
  background: #005dcc;
}

.fsm-system-modal__btn--destructive {
  width: 130px;
  border: 1px solid #db372d;
  background: transparent;
  color: #db372d;
}

.fsm-system-modal__btn--destructive:hover,
.fsm-system-modal__btn--destructive:focus {
  background: rgba(219, 55, 45, 0.06);
}

.fsm-system-modal__btn--stay {
  width: 130px;
}

.fsm-system-modal__btn--close {
  width: 130px;
  margin: 0 auto;
}

.fsm-system-modal__warning {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 26px auto 0;
  width: 40px;
  height: 35px;
  color: #ffcb05;
  line-height: 0;
}

.fsm-system-modal__warning img,
.fsm-system-modal__asset-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fsm-system-modal__btn .fsm-system-modal__asset-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.fsm-system-modal__scope-icon .fsm-system-modal__asset-icon {
  width: 16px;
  height: 16px;
}

.fsm-system-modal__contact-icon .fsm-system-modal__asset-icon {
  width: 20px;
  height: 24px;
}

.fsm-system-modal__unsaved-body {
  margin: 12px 69px 0;
  color: #0b2346;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
}

.fsm-system-modal__contacts {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 16px;
  overflow-y: auto;
}

.fsm-system-modal__contact {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 8px 15px;
  border: 0;
  border-bottom: 1px solid #e5e7eb;
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.fsm-system-modal__contact:last-of-type {
  border-bottom: 0;
}

.fsm-system-modal__contact:hover,
.fsm-system-modal__contact:focus {
  background: rgba(11, 35, 70, 0.04);
}

.fsm-system-modal__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 9999px;
  background: #0b2346;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
}

.fsm-system-modal__contact-text {
  flex: 1 1 auto;
  min-width: 0;
}

.fsm-system-modal__contact-name {
  margin: 0;
  color: #0b2346;
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
}

.fsm-system-modal__contact-role {
  margin: 0;
  color: #0b2346;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.fsm-system-modal__contact-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: #0b2346;
}

.fsm-system-modal__pick-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 18px 0 23px;
}

/* Job Profile three-day planning screen (Figma 159:2080).
   Islands: topbar + footer stay put; the grid is ONLY the band between them —
   it must never paint/scroll behind either chrome layer. */
.job-reschedule-page-main--islands {
  display: flex !important; /* beat Tailwind `grid` on mainClass */
  flex-direction: column;
  overflow: hidden !important;
  box-sizing: border-box;
  height: calc(100dvh - var(--fsm-form-footer-reserve, 0px) - var(--fsm-bottom-inset, 0px));
  max-height: calc(100dvh - var(--fsm-form-footer-reserve, 0px) - var(--fsm-bottom-inset, 0px));
  min-height: 0 !important;
}

.job-reschedule-page-main--islands.job-reschedule-page {
  min-height: 0 !important;
}

.job-reschedule-page-main--islands > .job-reschedule-root--islands {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0 !important;
  height: 100%;
  overflow: hidden;
}

.job-reschedule-page {
  min-height: 100dvh;
  background: #fbfcfd;
}

.job-reschedule-root {
  min-height: 100dvh;
  background: #fbfcfd;
}

.job-reschedule-root--islands {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0 !important;
  overflow: hidden;
  padding-bottom: 0;
}

/* Kill document scroll while the nested grid is the only scrollport. */
body:has(.job-reschedule-page-main--islands) {
  overflow: hidden;
}

.job-reschedule-topbar {
  position: relative;
  z-index: 2;
  display: grid;
  flex: 0 0 auto;
  box-sizing: border-box;
  gap: 0;
  height: calc(var(--fsm-mobile-header-h) + env(safe-area-inset-top, 0px));
  min-height: calc(var(--fsm-mobile-header-h) + env(safe-area-inset-top, 0px));
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
  padding-bottom: 11px;
  border-bottom: 0;
  border-radius: 0 0 24px 24px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.job-reschedule-header {
  position: relative;
  display: flex;
  height: 23px;
  min-height: 23px;
  align-items: center;
  justify-content: center;
  padding: 0 3rem;
}

.job-reschedule-header h1 {
  color: #0b2346;
  font-size: 20px;
  line-height: 23px;
}

.job-reschedule-header a {
  position: absolute;
  top: 50%;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  line-height: 0;
  transform: translateY(-50%);
  color: #273942;
}

.job-reschedule-header a .fsm-dismiss-icon {
  width: 19px;
  height: 19px;
}

.job-reschedule-requested {
  display: flex;
  width: 271px;
  max-width: calc(100% - 2rem);
  min-width: 0;
  height: 31px;
  align-items: center;
  justify-content: center;
  margin: 8px auto 0;
  padding: 0 1rem;
  border-radius: 24px;
  background: #f8fafc;
  color: #0b2346;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

.job-reschedule-requested__prefix {
  font-weight: 400;
}

.job-reschedule-date-strip {
  display: flex;
  width: 100%;
  max-width: 412px;
  /* Figma 1207:2537 Dates: 244×64. Keep overflow visible for disc shadows. */
  height: 64px;
  margin: 11px auto 0;
  padding: 0 12px 0 0;
  overflow: visible;
}

.job-reschedule-date-strip__gutter {
  flex: 0 0 81px;
  width: 81px;
}

.job-reschedule-date-strip__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  flex: 1 1 auto;
  min-width: 0;
}

.job-reschedule-date-cell {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0b2346;
}

.job-reschedule-weekday {
  z-index: 1;
  height: 20px;
  color: #6b7280;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  text-transform: none;
}

/* Screenshot wins over white SVG export: soft gray + shadow on light host. */
.job-reschedule-day-disc {
  position: absolute;
  top: 22px;
  left: 50%;
  z-index: 0;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #f3f4f6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transform: translateX(-50%);
}

.job-reschedule-date-cell--active .job-reschedule-day-disc {
  top: 26px;
  width: 37px;
  height: 37px;
  background: #0b2346;
  box-shadow: none;
}

.job-reschedule-day-number {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  color: #0b2346;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}

.job-reschedule-date-cell--active .job-reschedule-day-number {
  width: 37px;
  height: 37px;
  margin-top: 6px;
  color: #ffffff;
}

.job-reschedule-grid {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #ffffff;
  scrollbar-width: none;
}

.job-reschedule-grid::-webkit-scrollbar {
  display: none;
}

.job-reschedule-grid--dragging {
  overscroll-behavior: none;
  overflow-anchor: none;
  touch-action: none;
}

.job-reschedule-grid-inner {
  max-width: 412px;
  margin: 0 auto;
  padding: 0 12px 0 0;
  background: #ffffff;
}

.job-reschedule-hour-label-column {
  position: relative;
  width: 81px;
  flex: 0 0 81px;
}

.job-reschedule-hour-label {
  position: absolute;
  right: 12px;
  left: auto;
  color: #0b2346;
  font-size: 14px;
  line-height: 25px;
  text-align: right;
  transform: translateY(-50%);
}

.job-reschedule-columns {
  min-width: 0;
}

.job-reschedule-column--ruled {
  border-left: 1px solid #cbd5e1;
}

.job-reschedule-pill {
  left: 4px;
  right: 4px;
  z-index: 1;
}

.job-reschedule-pill--current {
  z-index: 3;
  touch-action: none;
  user-select: none;
}

.job-reschedule-pill--current .fsm-calendar-job-pill__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-reschedule-column [data-job-reschedule-hour-cell] {
  z-index: 0;
}

footer.form-footer:has(.job-reschedule-footer) {
  left: 0;
  right: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}

/* Datetime dock owns the 176px panel; do not strip it or paint a second shell. */
.job-reschedule-footer.fsm-visit-action-dock--datetime .fsm-visit-action-dock__actions {
  justify-content: center;
  width: 278px;
  max-width: 100%;
  margin-inline: auto;
}

/* Figma 1207:2646 Date Selector: 278×40, clock | centered dd.mm.yy  HH:mm | chevron */
.job-reschedule-date-time {
  position: relative;
  display: grid;
  box-sizing: border-box;
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  grid-template-rows: 40px;
  align-items: center;
  column-gap: 8px;
  justify-self: center;
  width: 278px;
  max-width: 100%;
  height: 40px;
  margin: 0 auto;
  padding: 0 16px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.job-reschedule-date-time > :first-child {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  color: #0b2346;
}

.job-reschedule-date-time-display {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 100%;
  min-width: 0;
  color: #0b2346;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
}

.job-reschedule-date-time-inputs {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  opacity: 0;
}

.job-reschedule-date-time-chevron {
  position: relative;
  z-index: 1;
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  color: #0b2346;
  line-height: 0;
}

.job-reschedule-date-input,
.job-reschedule-time-input {
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
}

.job-reschedule-date-input {
  width: 62%;
  flex: 0 0 62%;
}

.job-reschedule-time-input {
  width: 38%;
  flex: 0 0 38%;
}

.job-reschedule-date-input::-webkit-calendar-picker-indicator,
.job-reschedule-time-input::-webkit-calendar-picker-indicator,
.job-reschedule-time-input::-webkit-inner-spin-button {
  width: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.job-reschedule-date-input::-webkit-datetime-edit,
.job-reschedule-time-input::-webkit-datetime-edit {
  padding: 0;
}

.job-reschedule-date-input:focus,
.job-reschedule-time-input:focus {
  box-shadow: none;
}

.job-reschedule-more {
  padding: 0.05rem 0;
}

@media (min-width: 768px) {
  .job-profile-page--planning .job-profile-header {
    margin-left: 0;
    margin-right: 0;
  }

  .job-profile-content--planning {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .job-profile-planning-sheet {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 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;
}

/* 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);
}

.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;
  }
}

.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);
}

/* 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);
}

/* 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);
}

.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);
}

.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;
}

.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;
}

.tasks-mobile-page--schedule {
  background: var(--fsm-background);
  overflow-x: clip;
}

.tasks-mobile-page--schedule-listlike {
  background:
    linear-gradient(180deg, rgba(219, 234, 254, 0.16) 0%, rgba(239, 246, 255, 0.1) 46%, rgba(223, 248, 239, 0.08) 100%),
    var(--fsm-background);
}

.schedule-page-root {
  --schedule-page-inline-pad: 0.75rem;
  --schedule-chrome-height: 0px;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* Tailwind `grid` + min-width:auto lets the map carousel's card row
     inflate this column to ~7×300px, so the track never becomes a scrollport. */
  grid-template-columns: minmax(0, 1fr);
  overflow-x: clip;
  padding: 0 var(--schedule-page-inline-pad) 0.25rem;
}

#scheduleBodyHost {
  min-width: 0;
  max-width: 100%;
}

.schedule-page-root[data-schedule-view="map"] {
  --schedule-page-inline-pad: 0px;
  padding: 0;
  padding-inline: 0;
  gap: 0;
  overflow: visible;
}

.tasks-mobile-page--schedule-map {
  overflow: visible;
}

.schedule-page-root[data-schedule-view="list"] {
  padding-top: calc(var(--schedule-chrome-height, 0px) + 0.35rem);
  background: #fbfcfd;
}

.schedule-page-root[data-schedule-view="three-day"] {
  --schedule-three-day-hours-col: 71px;
  --schedule-three-day-stage-inline-pad: 0;
  /* Figma 1207:2434 Control Header is 160px including status y=36.
     Content below status = 124px. Calendar body still tucks under the drawer. */
  --schedule-three-day-status-inset: 36px;
  --schedule-three-day-drawer-body: 124px;
  --schedule-three-day-header-underlap: 59px;
  background: #fbfcfd;
  overflow: visible;
  gap: 0;
  padding: calc(var(--schedule-chrome-height, 0px) - var(--schedule-three-day-header-underlap, 59px)) 0 0;
}

.tasks-mobile-page--schedule:has([data-schedule-view="three-day"]) {
  overflow: visible;
}

body:has([data-schedule-view="three-day"]) {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.schedule-floating-chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 44;
  display: grid;
  gap: 0;
  pointer-events: none;
}

.schedule-floating-chrome > * {
  pointer-events: auto;
}

.schedule-top-panel {
  position: relative;
  display: grid;
  box-sizing: border-box;
  /* Figma Control Header 160 includes status y=36. Do not add 160 + safe-area
     and keep 36px padding — that double-counts the status band (18a4). */
  height: calc(
    max(env(safe-area-inset-top, 0px), var(--fsm-mobile-header-status-h)) + var(--fsm-mobile-header-body-h)
  );
  min-height: calc(
    max(env(safe-area-inset-top, 0px), var(--fsm-mobile-header-status-h)) + var(--fsm-mobile-header-body-h)
  );
  gap: 9px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: max(env(safe-area-inset-top, 0px), var(--fsm-mobile-header-status-h)) 20px 9px 21px;
  border: 0;
  border-radius: 0 0 24px 24px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.schedule-page-root[data-schedule-view="three-day"] .schedule-top-panel {
  /* Same Control Header 160 + safe-area as list/map; 90% fill so the grid tucks under. */
  box-sizing: border-box;
  height: auto;
  max-height: none;
  overflow: visible;
  background: rgba(255, 255, 255, 0.9);
}

.schedule-page-root[data-schedule-view="three-day"] .schedule-top-panel::after {
  content: none;
  display: none;
}

.schedule-page-root[data-schedule-view="three-day"] .schedule-top-panel__toolbar {
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  align-items: start;
}

.schedule-page-root[data-schedule-view="three-day"] .schedule-top-panel__toggle {
  /* Center on the 412 frame, not the asymmetric 21/24 content box (Figma View select x=108). */
  top: 0;
  left: calc(50% + 1.5px);
  height: 44px;
}

.schedule-page-root[data-schedule-view="three-day"] .schedule-top-panel__month .form-select,
.schedule-page-root[data-schedule-view="three-day"] .schedule-top-panel__month select {
  height: 44px;
  max-height: 44px;
  /* Figma 1207:2456 chevron 7.5×3.26, stroke 2. */
  background-size: 8px 4px !important;
  background-position: right 9px center !important;
}

.schedule-page-root[data-schedule-view="three-day"] .schedule-top-panel__toolbar > .schedule-refresh-control {
  margin-top: 0;
}

.schedule-page-root[data-schedule-view="three-day"] .schedule-refresh-control__dot {
  right: auto;
  bottom: auto;
  left: 23px;
  top: 22px;
  width: 10px;
  height: 10px;
  box-shadow: none;
}

.schedule-page-root[data-schedule-view="three-day"] .schedule-refresh-control__dot--idle {
  background: #b4e0a4;
}

.schedule-page-root[data-schedule-view="three-day"] .schedule-top-panel__ribbon,
.schedule-page-root[data-schedule-view="three-day"] .schedule-three-day-ribbon {
  height: 62px;
  min-height: 62px;
  max-height: 62px;
}

.schedule-page-root[data-schedule-view="three-day"] .fsm-segmented-control--schedule {
  width: 195px;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
}

.schedule-page-root[data-schedule-view="three-day"] .fsm-segmented-control--schedule .fsm-segmented-control__item {
  min-height: 0;
  height: 100%;
}

.schedule-top-panel__toolbar {
  position: relative;
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 0;
  min-height: 44px;
  height: 44px;
}

.schedule-top-panel__month {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  grid-column: 1;
  width: 65px;
  justify-self: start;
  z-index: 1;
}

.schedule-top-panel__month .form-select,
.schedule-top-panel__month select {
  width: 65px;
  min-width: 65px;
  height: 44px;
  max-width: 65px;
  field-sizing: content;
  padding: 0 22px 0 12px !important;
  border-radius: 28px;
  border-color: #e2e8f0;
  background-color: #ffffff;
  box-shadow: none;
  color: #0b2346;
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230B2346' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 10px 7px !important;
}

.schedule-top-panel__toggle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  width: auto;
  min-width: 0;
  padding-left: 0;
  z-index: 1;
}

.schedule-top-panel__ribbon {
  width: 100%;
  min-width: 0;
  height: 62px;
  min-height: 62px;
}

.schedule-top-panel__toolbar > .schedule-refresh-control {
  grid-column: 3;
  justify-self: end;
  z-index: 1;
}

.schedule-refresh-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #ffffff;
  color: #0b2346;
  box-shadow: none;
}

.schedule-refresh-control__icon {
  display: inline-flex;
}

.schedule-refresh-control__dot {
  position: absolute;
  right: 0.32rem;
  bottom: 0.32rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92);
}

.schedule-refresh-control__dot--idle {
  background: #22c55e;
}

.schedule-refresh-control__dot--pending {
  background: #f59e0b;
}

.schedule-refresh-control__dot--syncing {
  background: #3b82f6;
}

.schedule-refresh-control__dot--danger {
  background: #ef4444;
}

.schedule-floating-chrome__summary {
  display: flex;
  justify-content: center;
  max-width: 100%;
  margin: 15px auto 0;
}

.schedule-floating-chrome__summary:empty {
  display: none;
  margin: 0;
}

.schedule-map-stage,
.schedule-list-stage {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-top: 0;
}

.schedule-map-stage--interactive {
  min-height: max(25rem, calc(100svh - var(--fsm-shell-header-h, 0px) - var(--fsm-bottom-nav-reserve, 0px) - 9.5rem));
}

.schedule-map-stage--fullscreen {
  margin-inline: calc(-1 * var(--schedule-page-inline-pad, 0.75rem));
  padding-top: 0;
}

.schedule-map-shell {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.schedule-map-shell--fullscreen {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  /* Keep map host clipped; allow carousel card shadows to paint outside. */
  overflow: visible;
}

.schedule-map-shell--faded::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.schedule-page-root[data-schedule-view="three-day"] .schedule-map-shell--faded::after {
  background: rgba(255, 255, 255, 0.1);
}

.schedule-map-canvas {
  position: relative;
  min-height: max(22rem, calc(100svh - var(--fsm-shell-header-h, 0px) - var(--fsm-bottom-nav-reserve, 0px) - 11.75rem));
  /* Neutral Maps gray. A sky-blue fill (#dbeafe) reads as a right-edge strip
     when the Google canvas is 1–2px short of the host. */
  background: #e8eaed;
  z-index: 0;
}

.schedule-map-stage--background .schedule-map-canvas {
  min-height: 16rem;
}

.schedule-page-root[data-schedule-view="map"] .schedule-map-stage--fullscreen,
.schedule-page-root[data-schedule-view="three-day"] .schedule-map-stage--fullscreen {
  margin-inline: 0;
}

.schedule-page-root[data-schedule-view="map"] .schedule-map-stage--interactive {
  min-height: 100svh;
  overflow: visible;
}

.schedule-page-root[data-schedule-view="map"] .schedule-map-canvas {
  width: 100%;
  max-width: 100%;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  /* Neutral Maps gray — never #dbeafe, which reads as a right-edge “blue line”. */
  background: #e8eaed;
}

/* Match canvas fill so a 1px-short Google canvas cannot reveal #f7f9fc as a “blue” hairline. */
html:has(.schedule-page-root[data-schedule-view="map"]),
body:has(.schedule-page-root[data-schedule-view="map"]),
body:has(.schedule-page-root[data-schedule-view="map"]) #app,
body:has(.schedule-page-root[data-schedule-view="map"]) #shellMain {
  background: #e8eaed;
}

.schedule-page-root[data-schedule-view="map"] .schedule-map-stage--interactive {
  padding-top: 0;
}

.schedule-google-map-host {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
}

.schedule-google-map-host > div,
.schedule-google-map-host .gm-style {
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
}

.schedule-map-status {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 1.5rem);
  padding: 0.38rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--fsm-foreground);
  box-shadow: 0 10px 24px rgba(11, 35, 70, 0.14);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  z-index: 2;
}

.schedule-map-status.hidden {
  display: none;
}

.schedule-map-status--danger {
  background: rgba(251, 44, 54, 0.86);
  color: #ffffff;
}

.schedule-map-carousel {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* Figma cards at y=701 h=110 on 915 → bottom edge 104px from screen bottom
     (28px nav inset + 48px nav + 28px card↔nav gap). */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 104px);
  /* Full-bleed row: do not add a left gutter here (that was the extra inset). */
  padding: 0;
  z-index: 6;
  pointer-events: auto;
  isolation: isolate;
  overflow: visible;
}

.schedule-map-carousel__track {
  display: flex;
  gap: 20px;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  /* Last-card snap to the left edge: viewport − 300px card. Peek of card 2 is vw − 320. */
  padding: 0 calc(100vw - 300px) 0 0;
  pointer-events: auto;
  position: relative;
  z-index: 1;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  overscroll-behavior-x: none;
  scrollbar-width: none;
}

.schedule-map-carousel__track::-webkit-scrollbar {
  display: none;
}

.schedule-map-carousel__track > * {
  flex: 0 0 auto;
  pointer-events: auto;
  scroll-snap-align: start;
  /* `always` kills job-card fling; peek geometry comes from start-align + parent inset. */
  scroll-snap-stop: normal;
}

.tasks-mobile-task-card.schedule-map-task-card {
  width: 300px;
  min-height: 110px;
  border: none;
  border-radius: 24px;
  background: #ffffff;
  box-shadow:
    0 0 0 1px #e2e8f0,
    0 2px 8px rgba(0, 0, 0, 0.2);
  overflow: visible;
  padding: 0;
}

.schedule-map-task-card--active {
  background: #ffffff !important;
  box-shadow:
    0 0 0 1px var(--fsm-schedule-card-ring, #e2e8f0),
    0 2px 8px rgba(0, 0, 0, 0.2);
  transform: none;
}

.schedule-map-task-card--next {
  background: rgba(255, 255, 255, 0.95) !important;
  opacity: 1;
  box-shadow:
    0 0 0 1px var(--fsm-schedule-card-ring, #e2e8f0),
    0 2px 8px rgba(0, 0, 0, 0.2);
}

.schedule-task-card__content {
  display: grid;
  gap: 2px;
  padding: 19px 18px 18px 25px;
  color: #0b2346;
  text-align: left;
}

.schedule-task-card__time {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.schedule-task-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #0b2346;
}

.schedule-task-card__company,
.schedule-task-card__address {
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #273942;
}

/* Map cards reuse JobCardCorp stripe geometry (wide stripe + white face). */
.schedule-map-task-card [data-map-task-accent="1"],
.schedule-map-task-card .fsm-schedule-job-card__accent {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 26px !important;
  border-radius: 24px 0 0 24px !important;
}

.schedule-map-carousel__track [data-map-task-card="1"] {
  cursor: pointer;
  position: relative;
  z-index: 1;
  touch-action: pan-x;
}

.schedule-map-carousel__track [data-map-task-card="1"]:focus-visible {
  outline: 2px solid rgba(var(--fsm-primary-rgb), 0.36);
  outline-offset: 2px;
}

.schedule-top-panel__ribbon,
.schedule-calendar-ribbon,
.schedule-calendar-ribbon__scroller,
.schedule-calendar-ribbon__day {
  /* JS owns both swipe directions. Native overflow-x / pan-x ate the reverse gesture
     (could advance dates, but not swipe back toward present). */
  touch-action: none;
}

.schedule-calendar-ribbon {
  display: grid;
  gap: 0;
}

.schedule-calendar-ribbon__scroller {
  /* 7-day week fits the drawer; do not native-scroll this strip. */
  overflow: visible;
  overscroll-behavior-x: none;
  scrollbar-width: none;
  padding: 8px 2px 12px;
  margin: -8px -2px -12px;
}

.schedule-calendar-ribbon__scroller::-webkit-scrollbar {
  display: none;
}

.schedule-calendar-ribbon__track {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  min-width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.schedule-calendar-ribbon__day {
  display: inline-flex;
  min-width: 42px;
  width: 46px;
  min-height: 60px;
  padding: 0;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #273942;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

.schedule-calendar-ribbon__day[aria-pressed="true"] {
  background: transparent;
  color: #0b2346;
}

.schedule-calendar-ribbon__weekday {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: 0;
  margin-bottom: 4px;
  transition: color 180ms ease;
}

.schedule-calendar-ribbon__number {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  background: transparent;
  box-shadow: none;
}

/* Explicit disc layer (Figma Dates 308:757 ellipses). Verified against the raw
   ellipse SVG exports: inactive days are literally fill="white" with no stroke
   and no shadow, and the selected day is a flat fill="#0B2346" with no shadow
   either. Do not paint a visible circle/shadow behind inactive days — only the
   selected day gets a filled disc. The scale transform stays purely so the
   selected disc animates in (background + grow) on tap. */
.schedule-calendar-ribbon__disc {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  transform: scale(0.82);
  transform-origin: center center;
  transition:
    background-color 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}

.schedule-calendar-ribbon__day-num {
  position: relative;
  z-index: 1;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: #273942;
  transition: color 180ms ease;
}

.schedule-calendar-ribbon__day[aria-pressed="true"] .schedule-calendar-ribbon__disc {
  background: #0b2346;
  box-shadow: none;
  transform: scale(1);
}

.schedule-calendar-ribbon__day[aria-pressed="true"] .schedule-calendar-ribbon__day-num {
  color: #ffffff;
}

.schedule-calendar-ribbon__day:focus-visible .schedule-calendar-ribbon__disc {
  outline: 2px solid rgba(11, 35, 70, 0.36);
  outline-offset: 2px;
}

.schedule-summary-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0;
  width: 180px;
  max-width: 180px;
  height: 25px;
  padding: 0 6px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
  white-space: nowrap;
  overflow: hidden;
}

.schedule-summary-pill--compact {
  padding: 0 6px;
  width: 180px;
  max-width: 180px;
  height: 25px;
}

.schedule-summary-pill__date {
  display: inline-flex;
  align-items: baseline;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: #0b2346;
  white-space: nowrap;
  text-transform: none;
}

.schedule-summary-pill__weekday {
  font-weight: 700;
}

.schedule-summary-pill__dayMonth {
  font-weight: 500;
}

.schedule-summary-pill__meta {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
  color: #0b2346;
  white-space: nowrap;
}

.schedule-summary-pill__meta--count {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-left: 10px;
  font-weight: 500;
}

.schedule-summary-pill__value {
  font-weight: 700;
  color: var(--fsm-foreground);
}

.schedule-summary-pill__meta:last-child {
  margin-left: 10px;
}

.schedule-offline-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: rgba(251, 44, 54, 0.82);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(251, 44, 54, 0.16);
}

.schedule-offline-banner__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.schedule-offline-banner__text {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}

.schedule-list-shell {
  position: relative;
  padding: 0;
}

.schedule-list-stage {
  min-height: max(22rem, calc(100svh - var(--fsm-bottom-nav-reserve, 0px) - var(--schedule-chrome-height, 0px) - 0.75rem));
}

.schedule-list-stage__overlay {
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding: 0;
}

.schedule-list-stage__surface {
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0 20px 20px;
}

.schedule-day-intro {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 15px 0 8px;
}

.schedule-day-intro--current {
  margin-top: 0;
}

.schedule-next-day-break {
  /* ClickUp list-view source (not in Figma frame): centered "СЛЕДВАЩ ДЕН" only */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 20px;
  margin: 4px 0 2px;
}

.schedule-next-day-break__label {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #273942;
  text-align: center;
  white-space: nowrap;
}

.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-end-note {
  display: block;
  width: 100%;
  text-align: center;
  margin: 1rem 0 0;
  padding: 0.25rem 0.5rem;
}

.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: 18px;
}

.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.55rem calc(var(--bs-gutter-x, 1.5rem) / 2) 0.25rem;
  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: 8px;
}

.tasks-mobile-page--schedule .tasks-mobile-route-group {
  display: grid;
  gap: 0.05rem;
}

.tasks-mobile-page--schedule .tasks-mobile-day-cards {
  display: grid;
  gap: 8px;
  background: transparent;
}

.schedule-list-task-card {
  --schedule-list-card-time: #0b2346;
  --schedule-list-card-title: #0b2346;
  --schedule-task-accent: #0b2346;
  --schedule-list-card-face: #ffffff;
  position: relative;
  display: block;
  width: 100%;
  min-height: 110px;
  padding: 0;
  overflow: hidden;
  border: none;
  border-radius: 24px;
  background: var(--schedule-list-card-face);
  color: #0b2346;
  box-shadow:
    0 0 0 1px #e2e8f0,
    0 2px 8px rgba(0, 0, 0, 0.05);
  text-align: left;
  text-decoration: none;
}

.schedule-list-task-card:not(.schedule-list-task-card--completed)::after {
  content: "";
  position: absolute;
  inset: 0 0 0 6px;
  z-index: 1;
  border-radius: 21px;
  background: var(--schedule-list-card-face);
  pointer-events: none;
}

.schedule-list-task-card:focus-visible {
  outline: 2px solid var(--fsm-primary);
  outline-offset: 2px;
}

.schedule-list-task-card--confirmed {
  --schedule-task-accent: #0b2346;
}

.schedule-list-task-card--unconfirmed {
  --schedule-list-card-time: #5e6a70;
  --schedule-list-card-title: #6b7280;
  --schedule-task-accent: #6b7280;
}

.schedule-list-task-card .schedule-task-card__time {
  color: var(--schedule-list-card-time);
}

.schedule-list-task-card .schedule-task-card__title {
  color: var(--schedule-list-card-title);
}

.schedule-list-task-card__accent {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 26px;
  border-radius: 24px 0 0 24px;
  background: var(--schedule-task-accent, #0b2346);
  z-index: 0;
}

.schedule-list-task-card__tags {
  position: absolute;
  top: 13px;
  right: 14px;
  z-index: 2;
  display: grid;
  justify-items: end;
  gap: 2px;
}

.schedule-list-task-card__tag {
  display: inline-flex;
  align-items: center;
  min-height: 16px;
  padding: 0 5px;
  border-radius: 9px;
  color: #0b2346;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.schedule-list-task-card__tag--receivables {
  background: #ffe78f;
}

.schedule-list-task-card__tag--renewal {
  background: #f47873;
}

.schedule-list-task-card__tag--new {
  background: #b4e0a4;
}

.schedule-list-task-card--completed {
  height: 36px;
  min-height: 36px;
  border: 1px solid #b4e0a4;
  border-radius: 18px;
  background: #e6ffdd;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.schedule-list-task-card__completed-content {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: 0 24px;
  color: #0b2346;
  font-size: 15px;
  line-height: 1;
}

.schedule-list-task-card__completed-time,
.schedule-list-task-card__completed-title {
  font-weight: 700;
}

.schedule-gap-create-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.72rem 0.82rem;
  border: 1px dashed rgba(var(--fsm-primary-rgb), 0.28);
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.84);
  color: var(--fsm-foreground);
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(11, 35, 70, 0.06);
}

.schedule-gap-create-card:hover,
.schedule-gap-create-card:focus-visible {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(var(--fsm-primary-rgb), 0.28);
  color: var(--fsm-primary);
}

.schedule-gap-create-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(var(--fsm-highlight-rgb), 0.85);
  color: var(--fsm-primary);
}

.schedule-gap-create-card__body {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.schedule-gap-create-card__title {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.1;
}

.schedule-gap-create-card__meta {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--fsm-primary);
}

.schedule-three-day-ribbon {
  display: grid;
  grid-template-columns: var(--schedule-three-day-hours-col, 71px) minmax(0, 1fr);
  gap: 0;
  align-items: start;
  touch-action: pan-y;
}

.schedule-three-day-ribbon__spacer {
  display: block;
  width: 100%;
}

.schedule-three-day-ribbon__viewport {
  overflow: hidden;
  min-width: 0;
  height: 63px;
  padding: 0;
  margin: 0;
}

.schedule-three-day-ribbon__track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: calc(100% * 5 / 3);
  transform: translateX(-20%);
  will-change: transform;
}

.schedule-three-day-ribbon__track.is-animating,
.schedule-three-day-grid__track.is-animating {
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .schedule-three-day-ribbon__track.is-animating,
  .schedule-three-day-grid__track.is-animating {
    transition: none;
  }
}

.schedule-three-day-ribbon__item {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 1px;
  height: 63px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.schedule-three-day-ribbon__weekday {
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  height: 19px;
  color: #0b2346;
  text-transform: lowercase;
}

.schedule-three-day-ribbon__number {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
}

/* Figma Dates 288:763/767/771: selected fill="#0B2346"; unselected fill="white"
   with no stroke. Do not invent an outline on inactive days. */
.schedule-three-day-ribbon__disc {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  transform: scale(0.82);
  transform-origin: center center;
  transition:
    background-color 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}

.schedule-three-day-ribbon__day {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: #0b2346;
  transition: color 180ms ease;
}

.schedule-three-day-ribbon__item[aria-pressed="true"] .schedule-three-day-ribbon__disc {
  background: #0b2346;
  transform: scale(1);
}

.schedule-three-day-ribbon__item[aria-pressed="true"] .schedule-three-day-ribbon__day {
  color: #ffffff;
}

.schedule-three-day-stage {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: calc(100svh - (var(--schedule-chrome-height, 0px) - var(--schedule-three-day-header-underlap, 59px)));
  margin-top: 0;
  padding-top: 0;
}

/* White→clear wash behind the shared nav capsule (do not restyle the capsule). */
.schedule-three-day-stage::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(env(safe-area-inset-bottom, 0px) + 52px);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 42%,
    rgba(255, 255, 255, 0.92) 100%
  );
  pointer-events: none;
  z-index: 39;
}

.schedule-three-day-stage__map {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.schedule-three-day-stage__map .schedule-map-stage,
.schedule-three-day-stage__map .schedule-map-shell,
.schedule-three-day-stage__map .schedule-map-canvas {
  height: 100%;
  min-height: 100%;
}

.schedule-three-day-stage__overlay {
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding: 0 0 calc(var(--fsm-bottom-nav-reserve, 80px) + 24px);
  max-height: calc(100svh - (var(--schedule-chrome-height, 0px) - var(--schedule-three-day-header-underlap, 59px)));
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.schedule-three-day-grid {
  position: relative;
  display: grid;
  grid-template-columns: var(--schedule-three-day-hours-col, 71px) minmax(0, 1fr);
  border-radius: 0;
  background: #fbfcfd;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

.schedule-three-day-grid__hours {
  position: relative;
  border-right: 0;
}

.schedule-three-day-grid__hour {
  position: absolute;
  right: 10px;
  left: auto;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 400;
  line-height: 25px;
  color: #0b2346;
  white-space: nowrap;
}

.schedule-three-day-grid__hour:first-child {
  transform: translateY(0);
}

.schedule-three-day-grid__columns {
  position: relative;
  min-width: 0;
  overflow: visible;
}

.schedule-three-day-grid__viewport {
  position: relative;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  /* Hour rules stay fixed while day columns slide (Google Calendar). */
  background-image: repeating-linear-gradient(
    to bottom,
    #e2e8f0 0,
    #e2e8f0 1px,
    transparent 1px,
    transparent 96px
  );
  background-size: 100% 96px;
  background-position: 0 0;
}

.schedule-three-day-grid__track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: calc(100% * 5 / 3);
  height: 100%;
  transform: translateX(-20%);
  will-change: transform;
}

.schedule-three-day-grid__column {
  position: relative;
  min-width: 0;
  height: 100%;
  border-left: 1px solid #e2e8f0;
  background-image: none;
  background-size: auto;
}

.schedule-three-day-grid__now-line {
  position: absolute;
  /* Figma Line 19 x=60 vs columns x=71; Ellipse 12 is 8×8 at x=56. */
  left: -11px;
  right: 0;
  height: 2px;
  background: #db372d;
  z-index: 8;
  pointer-events: none;
  box-shadow: none;
}

.schedule-three-day-grid__now-line::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #db372d;
  transform: translateY(-50%);
}

.schedule-three-day-grid__now-line.hidden {
  display: none;
}

.schedule-three-day-card,
.schedule-three-day-free {
  position: absolute;
  left: 2px;
  right: 1px;
  border-radius: 12px;
}

.schedule-three-day-free {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.1rem;
  padding: 0.65rem 2.5rem 0.55rem 0.7rem;
  border: 1.5px dashed #0b2346;
  background: #fbfbfb;
  color: #0b2346;
  text-decoration: none;
  text-align: center;
  overflow: hidden;
}

.schedule-three-day-free__time {
  font-size: 15px;
  font-weight: 700;
  color: #0b2346;
}

.schedule-three-day-free__label {
  font-size: 16px;
  font-weight: 700;
  color: #0b2346;
}

.schedule-three-day-free__icon {
  position: absolute;
  right: 7px;
  bottom: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #ffcb05;
  color: #ffffff;
}

@media (max-width: 480px) {
  .schedule-page-root {
    --schedule-page-inline-pad: 0.65rem;
    padding-inline: var(--schedule-page-inline-pad);
  }

  .schedule-page-root[data-schedule-view="map"] {
    padding: 0;
    padding-inline: 0;
  }

  .schedule-page-root[data-schedule-view="three-day"] {
    padding-inline: 0;
  }

  .schedule-list-stage__overlay {
    margin-top: 0;
    padding-inline: 0.1rem;
  }

  .schedule-three-day-stage__overlay {
    margin-top: 0;
    padding-inline: 0;
  }
}

.dark .schedule-gap-create-card {
  background: rgba(16, 43, 82, 0.9);
  border-color: rgba(255, 255, 255, 0.16);
}

.dark .schedule-gap-create-card:hover,
.dark .schedule-gap-create-card:focus-visible {
  background: rgba(16, 43, 82, 0.96);
}

.dark .schedule-top-panel,
.dark .schedule-list-stage__surface,
.dark .schedule-three-day-grid {
  background: rgba(16, 43, 82, 0.9);
}

.dark .schedule-page-root[data-schedule-view="three-day"] .schedule-top-panel {
  background: rgba(16, 43, 82, 0.9);
}

.dark .schedule-three-day-stage::after {
  background: linear-gradient(
    180deg,
    rgba(16, 43, 82, 0) 0%,
    rgba(16, 43, 82, 0.55) 42%,
    rgba(16, 43, 82, 0.92) 100%
  );
}

.dark .schedule-three-day-ribbon__day {
  color: var(--fsm-foreground);
}

.dark .schedule-three-day-ribbon__item[aria-pressed="true"] .schedule-three-day-ribbon__disc {
  background: #0b2346;
}

.dark .schedule-three-day-ribbon__item[aria-pressed="true"] .schedule-three-day-ribbon__day {
  color: #ffffff;
}

.dark .schedule-calendar-ribbon__disc {
  background: transparent;
  box-shadow: none;
}

.dark .schedule-calendar-ribbon__day-num {
  color: var(--fsm-foreground);
}

.dark .schedule-calendar-ribbon__day[aria-pressed="true"] .schedule-calendar-ribbon__disc {
  background: #0b2346;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.dark .schedule-calendar-ribbon__day[aria-pressed="true"] .schedule-calendar-ribbon__day-num {
  color: #ffffff;
}

.dark .schedule-page-root[data-schedule-view="three-day"] .schedule-top-panel::after {
  content: none;
  display: none;
}

.dark .schedule-refresh-control {
  background: rgba(16, 43, 82, 0.88);
  border-color: rgba(255, 255, 255, 0.08);
}

.dark .schedule-refresh-control__dot {
  box-shadow: 0 0 0 2px rgba(16, 43, 82, 0.92);
}

.dark .schedule-map-task-card,
.dark .schedule-list-task-card,
.dark .schedule-summary-pill,
.dark .schedule-three-day-free {
  background: #102b52;
  border-color: rgba(255, 255, 255, 0.16);
}

.dark .schedule-map-task-card--next {
  background: #163762;
}

.dark .schedule-task-card__title,
.dark .schedule-task-card__company,
.dark .schedule-task-card__address,
.dark .schedule-summary-pill__date,
.dark .schedule-summary-pill__weekday,
.dark .schedule-summary-pill__dayMonth,
.dark .schedule-summary-pill__meta,
.dark .schedule-three-day-card__title,
.dark .schedule-three-day-free__time,
.dark .schedule-three-day-free__label {
  color: var(--fsm-foreground);
}

.dark .schedule-map-shell--faded::after {
  background: rgba(11, 35, 70, 0.12);
}

.inbox-page-root {
  --inbox-page-inline-pad: 1.75rem;
  --inbox-chrome-height: 0px;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  /* Without an explicit column track, CSS Grid's default "auto" column sizes
     to the intrinsic (unclamped) max-content width of its widest descendant,
     which defeats any text-overflow: ellipsis further down the tree and can
     push this whole root (and the page) wider than the viewport. */
  grid-template-columns: minmax(0, 1fr);
  padding: calc(var(--inbox-chrome-height, 0px) + 0.7rem) var(--inbox-page-inline-pad)
    calc(var(--fsm-bottom-nav-reserve, 0px) + 1rem);
  background: #fbfcfd;
}

.inbox-list-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0.9rem;
  min-height: max(22rem, calc(100svh - var(--fsm-bottom-nav-reserve, 0px) - var(--inbox-chrome-height, 0px) - 1rem));
}

.inbox-month-progress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.inbox-month-progress__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: #0b2346;
}

.inbox-month-progress__value {
  font-size: 0.95rem;
  line-height: 1;
  font-weight: 600;
  color: #0b2346;
  white-space: nowrap;
}

.inbox-tabs {
  width: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 1);
  box-shadow: none;
  padding: 0.15rem;
}

.inbox-tabs-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  height: 2.45rem;
}

.inbox-tab-cell {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.inbox-tab-cell--plain {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  padding: 0.1rem 0.18rem;
}

.inbox-tab-cell__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
  text-transform: lowercase;
  white-space: nowrap;
  color: #0b2346;
}

.inbox-tab-cell__icon {
  display: inline-flex;
  color: #fa3e3e;
}

.inbox-tab-cell__count {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  color: #0b2346;
}

.inbox-tab-cell__count--danger {
  color: #fa3e3e;
}

.inbox-tab-pill-active {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  margin: 0.06rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: var(--fsm-primary, #0b2346);
  color: #ffffff;
}

.inbox-tab-pill-active__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
  text-transform: lowercase;
  white-space: nowrap;
}

.inbox-tab-pill-active__count {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}

.inbox-tab-pill-active--icon {
  background: #fa3e3e;
}

.inbox-tab-pill-active--icon .inbox-tab-cell__icon {
  color: #ffffff;
}

.inbox-tab-badge-dot {
  position: absolute;
  top: -0.28rem;
  right: -0.14rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 999px;
  background: #fa3e3e;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.96);
  flex: 0 0 auto;
}

.inbox-offline-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: calc(env(safe-area-inset-top, 0px) + 0.45rem) 0.75rem 0;
  padding: 0.8rem 0.9rem;
  border-radius: 1rem;
  background: #ffe78f;
  color: #0b2346;
  box-shadow: 0 10px 20px rgba(11, 35, 70, 0.12);
}

.inbox-offline-banner__icon {
  display: inline-flex;
  margin-top: 0.05rem;
  flex: 0 0 auto;
}

.inbox-offline-banner__text {
  font-size: 0.82rem;
  line-height: 1.35;
  font-weight: 600;
}

.inbox-section,
.inbox-date-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0.65rem;
}

.inbox-section-pill {
  display: inline-flex;
  align-self: start;
  justify-self: center;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  width: max-content;
  max-width: 100%;
  padding: 0 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--fsm-foreground);
  box-shadow: 0 8px 18px rgba(11, 35, 70, 0.06);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
}

.inbox-section-pill--muted {
  opacity: 0.65;
}

.inbox-card-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0.6rem;
}

.inbox-empty-card {
  align-self: start;
  padding: 1rem 1rem 1.05rem;
  border: 1px dashed rgba(var(--fsm-primary-rgb), 0.14);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.72);
  color: var(--fsm-muted-foreground);
  font-size: 0.9rem;
  line-height: 1.4;
}

.inbox-task-card {
  position: relative;
  align-self: start;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 1.35rem;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(11, 35, 70, 0.13);
  padding: 0.5rem 0.85rem;
}

.inbox-task-card__accent {
  position: absolute;
  top: 0.55rem;
  bottom: 0.55rem;
  left: 1.25rem;
  width: 0.4rem;
  border-radius: 999px;
  background: #5e6a70;
}

.inbox-task-card__accent--light {
  background: #ffffff;
}

.inbox-task-card__grid {
  display: grid;
  gap: 0.1rem;
  padding-left: 1.9rem;
}

.inbox-task-card__grid--inquiry {
  gap: 0.2rem;
}

.inbox-task-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem;
}

.inbox-task-card__copy {
  display: grid;
  flex: 1 1 auto;
  gap: 0.06rem;
  min-width: 0;
}

.inbox-task-card__eyebrow,
.inbox-task-card__time {
  color: #5e6a70;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.05;
}

.inbox-task-card__eyebrow--italic {
  font-style: italic;
  font-weight: 500;
}

.inbox-task-card__eyebrow--date {
  color: #0b2346;
  font-weight: 700;
}

.inbox-task-card__title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  align-items: baseline;
  min-width: 0;
}

.inbox-task-card__title {
  color: #0b2346;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.05;
}

.inbox-task-card__company,
.inbox-task-card__address {
  font-size: 0.9rem;
  line-height: 1.1;
}

.inbox-task-card__company {
  color: #5e6a70;
  font-weight: 400;
}

.inbox-task-card__address {
  color: #0b2346;
  font-weight: 700;
}

.inbox-task-card__company--inline {
  color: #304249;
}

.inbox-task-card__address--strong {
  font-size: 0.95rem;
}

.inbox-task-card__tags {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.35rem;
}

.inbox-task-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.4rem;
  min-width: 3.4rem;
  max-width: 100%;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  text-transform: lowercase;
  white-space: nowrap;
}

.inbox-task-tag--warning {
  background: #ffe78f;
  color: #6b4b00;
}

.inbox-task-tag--danger {
  background: #f47873;
  color: #671413;
}

.inbox-task-tag--success {
  background: #bfe5b2;
  color: #1d5c2d;
  text-transform: uppercase;
}

/*
 * Compact Inbox cards — Figma Jobs MOBILE:
 *   CC <30  6:27  — white Status Stripe + #fff7da face (+ hatch)
 *   CC >30  6:41  — critical outer + white Status Stripe + #fae1e0 face
 *   Incomplete 6:50 — #f47873 Status Stripe + #fff7da face
 * Same corner-stack as JobCardCorp (wide stripe + covering face); never hide the accent.
 */
.inbox-task-card--inquiry,
.inbox-task-card--incomplete {
  box-sizing: border-box;
  width: 100%;
  max-width: 371px;
  height: 72px;
  min-height: 72px;
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  border: none;
  border-radius: 24px;
  background: #ffffff;
  box-shadow:
    0 0 0 1px #e2e8f0,
    0 2px 8px rgba(0, 0, 0, 0.05);
  isolation: isolate;
}

.inbox-task-card--inquiry-danger {
  background: rgba(219, 55, 45, 0.15);
}

.inbox-task-card--inquiry .inbox-task-card__accent,
.inbox-task-card--incomplete .inbox-task-card__accent {
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  width: 26px;
  border-radius: 24px 0 0 24px;
  z-index: 0;
}

.inbox-task-card__accent--light {
  background: #ffffff;
}

.inbox-task-card__accent--incomplete {
  background: #f47873;
}

.inbox-task-card--inquiry::after,
.inbox-task-card--incomplete::after {
  content: "";
  position: absolute;
  inset: 1px 1px 1px 6px;
  z-index: 1;
  border-radius: 21px;
  pointer-events: none;
}

.inbox-task-card--inquiry-warning::after,
.inbox-task-card--incomplete::after {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.38) 0 5px,
      transparent 5px 10px
    ),
    #fff7da;
}

.inbox-task-card--inquiry-danger::after {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.28) 0 5px,
      transparent 5px 10px
    ),
    #fae1e0;
}

.inbox-task-card--inquiry .inbox-task-card__grid,
.inbox-task-card--incomplete .inbox-task-card__grid {
  position: absolute;
  inset: 10px 14px 8px 25px;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 0;
}

.inbox-task-card--inquiry .inbox-task-card__eyebrow--italic {
  color: #5e6a70;
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.15;
}

.inbox-task-card--incomplete .inbox-task-card__eyebrow--date {
  color: #0b2346;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.05;
}

.inbox-task-card--inquiry .inbox-task-card__title,
.inbox-task-card--incomplete .inbox-task-card__title {
  color: #0b2346;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.05;
}

.inbox-task-card--inquiry .inbox-task-card__company--inline,
.inbox-task-card--incomplete .inbox-task-card__company--inline {
  color: #0b2346;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.05;
}

.inbox-task-card--inquiry .inbox-task-card__address,
.inbox-task-card--incomplete .inbox-task-card__address {
  color: #273942;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.1;
}

.inbox-task-card--regular .inbox-task-card__accent {
  background: #5e6a70;
}

.inbox-task-card--planned .inbox-task-card__accent,
.inbox-task-card--completed .inbox-task-card__accent {
  background: #0b2346;
}

.inbox-task-card--cancelled .inbox-task-card__accent {
  background: #f47873;
}

/* ---- "Изпълнени" (completed) tab: compact single-line pill rows ----
   Both categories (Category 1 "Неотчетени" and Category 2, grouped by
   date) use the same flat, fully-rounded single-line row per the Clickup
   mockup: status icon, date/time, place (+ company, unreported only)
   truncated with an ellipsis, and an optional cash badge on the right.
   No colored accent bar and no separate address line, unlike the other
   inbox tabs' cards. */

.inbox-completion-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.inbox-completion-icon--ontime {
  color: #1d9a4a;
}

.inbox-completion-icon--late {
  color: #c98a00;
}

.inbox-unreported-pill {
  display: inline-flex;
  align-self: start;
  justify-self: center;
  align-items: center;
  gap: 0.4rem;
  height: 2.25rem;
  width: max-content;
  max-width: 100%;
  padding: 0 0.9rem;
  border-radius: 999px;
  background: #fdedcf;
  color: #6b4b00;
  box-shadow: 0 8px 18px rgba(11, 35, 70, 0.06);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
}

.inbox-unreported-pill__cash {
  font-weight: 800;
}

.inbox-completed-row {
  /* Figma Completed on time v2 (14:269): 371×34, radius 24.
     Status Stripe 19×32 @ x=1 + white face @ x=6 → ~5px mid-body crescent.
     Under ring-shadow: stripe flush w=20, face left=5. */
  position: relative;
  display: flex;
  align-self: start;
  align-items: center;
  box-sizing: border-box;
  gap: 4px;
  width: 100%;
  max-width: 371px;
  min-width: 0;
  height: 34px;
  min-height: 34px;
  margin-inline: auto;
  padding: 0 16px 0 25px;
  overflow: hidden;
  border: none;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 0 0 1px #e2e8f0;
  isolation: isolate;
}

.inbox-completed-row__accent {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20px;
  border-radius: 24px 0 0 24px;
  background: #b4e0a4;
  z-index: 0;
  pointer-events: none;
}

.inbox-completed-row--late .inbox-completed-row__accent {
  background: #ffcb05;
}

.inbox-completed-row__face {
  position: absolute;
  inset: 1px 1px 1px 5px;
  z-index: 1;
  border-radius: 21px;
  background: #ffffff;
  pointer-events: none;
}

.inbox-completed-row__meta,
.inbox-completed-row__text,
.inbox-completed-row__cash {
  position: relative;
  z-index: 2;
}

.inbox-completed-row__meta {
  flex: 0 0 auto;
  color: #0b2346;
  font-size: 15px;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}

.inbox-completed-row__text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 16px;
}

.inbox-completed-row__title {
  color: #0b2346;
  font-size: 15px;
  font-weight: 700;
}

.inbox-completed-row__company {
  margin-left: 4px;
  color: #0b2346;
  font-size: 14px;
  font-weight: 400;
}

.inbox-completed-row__cash {
  flex: 0 0 auto;
  margin-left: auto;
  color: #0b2346;
  font-size: 14px;
  font-weight: 700;
}

.inbox-task-card__cash-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: #ffe78f;
  color: #6b4b00;
  font-size: 0.85rem;
  font-weight: 800;
}

.dark .inbox-unreported-pill {
  background: rgba(255, 231, 143, 0.22);
  color: #ffe9b0;
}

.dark .inbox-completed-row {
  background: rgba(16, 43, 82, 0.92);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.dark .inbox-completed-row__face {
  background: rgba(16, 43, 82, 0.98);
}

.dark .inbox-completed-row__meta,
.dark .inbox-completed-row__company {
  color: rgba(255, 255, 255, 0.78);
}

.dark .inbox-completed-row__title {
  color: #f8fbff;
}

.dark .inbox-task-card__cash-badge {
  background: rgba(255, 231, 143, 0.28);
  color: #ffe9b0;
}

.dark .inbox-completion-icon--ontime {
  color: #6fdc9a;
}

.dark .inbox-completion-icon--late {
  color: #ffcf6b;
}

.dark .inbox-page-root {
  background: rgba(11, 35, 70, 0.44);
}

.dark .inbox-section-pill,
.dark .inbox-empty-card,
.dark .inbox-task-card {
  background: rgba(16, 43, 82, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.dark .inbox-month-progress__icon {
  color: #f8fbff;
}

.dark .inbox-tabs {
  background: rgba(16, 43, 82, 0.92);
}

.dark .inbox-tab-cell__label,
.dark .inbox-tab-cell__count {
  color: #f8fbff;
}

.dark .inbox-month-progress__value,
.dark .inbox-task-card__title,
.dark .inbox-task-card__address {
  color: #f8fbff;
}

.dark .inbox-task-card__eyebrow,
.dark .inbox-task-card__time,
.dark .inbox-task-card__company,
.dark .inbox-empty-card {
  color: rgba(255, 255, 255, 0.78);
}

.dark .inbox-tab-badge-dot {
  box-shadow: 0 0 0 2px rgba(16, 43, 82, 0.92);
}

.dark .inbox-task-card--inquiry-warning {
  background: #ffffff;
}

.dark .inbox-task-card--inquiry-warning::after {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.38) 0 5px,
      transparent 5px 10px
    ),
    #fff7da;
}

.dark .inbox-task-card--inquiry-danger {
  background: rgba(219, 55, 45, 0.22);
}

.dark .inbox-task-card--inquiry-danger::after {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.28) 0 5px,
      transparent 5px 10px
    ),
    #fae1e0;
}

.dark .inbox-task-card--incomplete {
  background: #ffffff;
}

.dark .inbox-task-card--incomplete::after {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.38) 0 5px,
      transparent 5px 10px
    ),
    #fff7da;
}

.dark .inbox-task-card__eyebrow--date {
  color: #f8fbff;
}

.dark .inbox-task-card--planned .inbox-task-card__accent,
.dark .inbox-task-card--completed .inbox-task-card__accent {
  background: #9fc8ff;
}

@media (max-width: 480px) {
  .inbox-page-root {
    --inbox-page-inline-pad: 1.75rem;
  }

  .inbox-month-progress__value {
    font-size: 0.85rem;
  }

  .inbox-tab-cell__label,
  .inbox-tab-pill-active__label {
    font-size: 0.63rem;
  }

  .inbox-tab-cell__count,
  .inbox-tab-pill-active__count {
    font-size: 0.76rem;
  }
}

/* ---- Refusal sub-categories (cancelled tab) ---- */

.refusal-category-section {
  display: grid;
  align-content: start;
  gap: 0.65rem;
}

/* Dark mode refusal section overrides */
.dark .refusal-category-section .inbox-section-pill {
  background: rgba(16, 43, 82, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.92);
}

.inbox-refusal-card {
  display: grid;
  box-sizing: border-box;
  align-self: start;
  align-content: center;
  width: 100%;
  max-width: 371px;
  min-width: 0;
  height: 72px;
  min-height: 72px;
  margin-inline: auto;
  gap: 1px;
  padding: 11px 20px;
  overflow: hidden;
  border: none;
  border-radius: 24px;
  background: #f3f4f6;
  box-shadow: none;
}

.inbox-refusal-card__meta {
  display: flex;
  align-items: center;
  gap: 0;
}

.inbox-refusal-card__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: #fa3e3e;
}

.inbox-refusal-card__datetime {
  color: #5e6a70;
  font-size: 15px;
  font-weight: 700;
  line-height: 16px;
}

.inbox-refusal-card__title {
  color: #5e6a70;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
}

.inbox-refusal-card__reason {
  overflow: hidden;
  color: #273942;
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-refusal-card--discrepancy {
  background: rgba(219, 55, 45, 0.15);
}

.refusal-category-section--discrepancy .inbox-section-pill {
  border-color: transparent;
  background: rgba(219, 55, 45, 0.15);
}

.dark .inbox-refusal-card {
  background: rgba(16, 43, 82, 0.92);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.dark .inbox-refusal-card__title,
.dark .inbox-refusal-card__datetime {
  color: #f8fbff;
}

.dark .inbox-refusal-card__reason {
  color: rgba(255, 255, 255, 0.78);
}

.dark .inbox-refusal-card--discrepancy {
  background: rgba(244, 120, 115, 0.18);
}

/* Inbox Figma fixture (412 × 915, June 2026). These overrides are deliberately
   namespaced to Inbox so the Schedule floating chrome remains independent. */
@media (max-width: 767px) {
  .inbox-floating-chrome .inbox-top-panel {
    box-sizing: border-box;
    height: calc(
      max(env(safe-area-inset-top, 0px), var(--fsm-mobile-header-status-h)) + var(--fsm-mobile-header-body-h)
    );
    min-height: calc(
      max(env(safe-area-inset-top, 0px), var(--fsm-mobile-header-status-h)) + var(--fsm-mobile-header-body-h)
    );
    padding: max(env(safe-area-inset-top, 0px), var(--fsm-mobile-header-status-h)) 20px 15px;
    gap: 15px;
    border-radius: 0 0 24px 24px;
    background: rgba(255, 255, 255, 0.9);
  }

  .inbox-floating-chrome .schedule-top-panel__month {
    margin-left: -1px;
  }

  /* KPI must center on the full toolbar width (Figma), not the unequal middle grid track. */
  .inbox-floating-chrome .schedule-top-panel__toggle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
    padding-left: 0;
  }

  .inbox-floating-chrome .schedule-top-panel__toolbar > .schedule-refresh-control {
    grid-column: 3;
    justify-self: end;
  }

  .inbox-floating-chrome .schedule-top-panel__ribbon {
    height: 50px;
  }

  .inbox-floating-chrome .inbox-month-progress {
    gap: 4px;
  }

  .inbox-floating-chrome .inbox-month-progress__value {
    font-size: 15px;
    font-weight: 600;
    line-height: 25px;
  }

  .inbox-floating-chrome .fsm-segmented-control--inbox {
    height: 50px;
    min-height: 50px;
    max-width: none;
    width: 100%;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    background: #ffffff;
    overflow: hidden;
  }

  .inbox-floating-chrome .fsm-segmented-control--inbox .fsm-segmented-control__item {
    height: 50px;
    min-height: 50px;
    gap: 0;
    padding: 0;
    border-radius: 28px;
  }

  .inbox-floating-chrome .fsm-segmented-control--inbox .fsm-segmented-control__item--destructive.fsm-segmented-control__item--active {
    background: transparent;
  }

  .inbox-floating-chrome .fsm-segmented-control--inbox .fsm-segmented-control__label,
  .inbox-floating-chrome .fsm-segmented-control--inbox .fsm-segmented-control__count {
    font-size: 14px;
    line-height: 18px;
  }

  .inbox-floating-chrome .fsm-segmented-control--inbox .fsm-segmented-control__label {
    font-weight: 600;
  }

  .inbox-floating-chrome .fsm-segmented-control--inbox .fsm-segmented-control__count {
    font-weight: 700;
  }

  .inbox-floating-chrome .fsm-segmented-control--inbox .fsm-segmented-control__badge-dot {
    top: 1px;
    right: 9px;
    width: 10px;
    height: 10px;
    background: #db372d;
    box-shadow: none;
  }

  .inbox-floating-chrome .fsm-segmented-control--inbox .fsm-segmented-control__icon {
    color: #f47873;
  }

  .inbox-floating-chrome .fsm-segmented-control--inbox .fsm-segmented-control__item--active .fsm-segmented-control__icon {
    color: #ffffff;
  }

  .inbox-page-root {
    --inbox-page-inline-pad: 20px;
    padding-top: calc(var(--inbox-chrome-height, 0px) + 15px);
    padding-bottom: calc(var(--fsm-bottom-nav-reserve, 0px) + 12px);
    background: #fbfcfd;
  }

  .inbox-list-stage,
  .inbox-section,
  .inbox-date-group,
  .refusal-category-section {
    gap: 8px;
  }

  .inbox-list-stage > *,
  .inbox-section,
  .inbox-date-group,
  .refusal-category-section,
  .inbox-unreported-section {
    width: 371px;
    max-width: 100%;
    margin-inline: auto;
  }

  .inbox-card-stack {
    gap: 8px;
  }

  .inbox-section-pill,
  .inbox-unreported-pill {
    height: 25px;
    min-height: 25px;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: none;
    color: #0b2346;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
  }

  .inbox-section-pill strong {
    font-weight: 700;
  }

  .inbox-unreported-pill {
    gap: 12px;
    border-radius: 18px;
    background: rgba(255, 203, 5, 0.15);
    font-size: 12px;
    font-weight: 700;
  }

  .inbox-unreported-pill__cash {
    font-weight: 700;
  }

  .inbox-task-card {
    /* Legacy soft-card host only. Inbox scheduled/planned rows use shared
       .fsm-schedule-job-card.inbox-job-card (JobCardCorp 371×110) — do not
       reintroduce page-local 110px rails that fork that stack. */
    box-sizing: border-box;
    height: 110px;
    min-height: 110px;
    padding: 0;
    border: none;
    border-radius: 24px;
    background: #ffffff;
    box-shadow:
      0 0 0 1px #e2e8f0,
      0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .inbox-task-card:not(.inbox-task-card--inquiry):not(.inbox-task-card--incomplete)::after {
    content: "";
    position: absolute;
    inset: 0 0 0 6px;
    z-index: 1;
    border-radius: 21px;
    background: #ffffff;
    pointer-events: none;
  }

  .inbox-task-card__accent {
    top: 0;
    bottom: 0;
    left: 0;
    width: 26px;
    border-radius: 24px 0 0 24px;
    z-index: 0;
  }

  .inbox-task-card__grid {
    position: absolute;
    inset: 18px 14px 16px 25px;
    z-index: 2;
    gap: 2px;
    padding: 0;
  }

  .inbox-task-card__head {
    gap: 8px;
  }

  .inbox-task-card__copy {
    gap: 1px;
  }

  .inbox-task-card__eyebrow,
  .inbox-task-card__time {
    font-size: 15px;
    font-weight: 700;
    line-height: 16px;
  }

  .inbox-task-card__title {
    font-size: 16px;
    line-height: 16px;
  }

  .inbox-task-card__company,
  .inbox-task-card__address {
    font-size: 14px;
    line-height: 16px;
  }

  .inbox-task-card__address,
  .inbox-task-card__company--inline {
    color: #273942;
    font-weight: 400;
  }

  .inbox-task-card__tags {
    gap: 2px;
  }

  .inbox-task-tag {
    min-width: 0;
    min-height: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: 9px;
    color: #0b2346;
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
  }

  .inbox-task-tag--success {
    background: #b4e0a4;
  }

  .inbox-task-tag--warning {
    background: #ffe78f;
    color: #0b2346;
  }

  .inbox-task-tag--danger {
    background: #f47873;
    color: #0b2346;
  }

  .inbox-task-card--regular .inbox-task-card__accent {
    background: #6b7280;
  }

  .inbox-task-card--confirmed .inbox-task-card__accent,
  .inbox-task-card--planned .inbox-task-card__accent {
    background: #0b2346;
  }

  .inbox-task-card--regular .inbox-task-card__time,
  .inbox-task-card--regular .inbox-task-card__title {
    color: #5e6a70;
  }

  .inbox-task-card--inquiry,
  .inbox-task-card--incomplete {
    height: 72px;
    min-height: 72px;
    border: 0;
    box-shadow:
      0 0 0 1px #e2e8f0,
      0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .inbox-task-card--inquiry-warning,
  .inbox-task-card--incomplete {
    background: #ffffff;
  }

  .inbox-task-card--inquiry-danger {
    background: rgba(219, 55, 45, 0.15);
  }

  .inbox-task-card--inquiry .inbox-task-card__accent,
  .inbox-task-card--incomplete .inbox-task-card__accent {
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    width: 26px;
    border-radius: 24px 0 0 24px;
  }

  .inbox-task-card--inquiry .inbox-task-card__accent--light {
    background: #ffffff;
  }

  .inbox-task-card--incomplete .inbox-task-card__accent--incomplete {
    background: #f47873;
  }

  .inbox-task-card--inquiry .inbox-task-card__grid,
  .inbox-task-card--incomplete .inbox-task-card__grid {
    inset: 10px 14px 8px 25px;
    gap: 1px;
  }

  .inbox-task-card--inquiry .inbox-task-card__eyebrow--italic {
    color: #5e6a70;
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.15;
  }

  .inbox-task-card--incomplete .inbox-task-card__eyebrow--date {
    color: #0b2346;
    font-size: 15px;
    font-weight: 700;
    line-height: 16px;
  }

  .inbox-task-card--inquiry .inbox-task-card__address,
  .inbox-task-card--incomplete .inbox-task-card__address,
  .inbox-task-card--inquiry .inbox-task-card__company--inline,
  .inbox-task-card--incomplete .inbox-task-card__company--inline {
    color: #273942;
    font-weight: 400;
  }

  .inbox-task-card--inquiry .inbox-task-card__company--inline,
  .inbox-task-card--incomplete .inbox-task-card__company--inline {
    color: #0b2346;
  }

  .inbox-completed-row {
    position: relative;
    box-sizing: border-box;
    height: 34px;
    min-height: 34px;
    gap: 4px;
    padding: 0 16px 0 25px;
    overflow: hidden;
    border: none;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 0 0 1px #e2e8f0;
  }

  .inbox-completed-row__accent {
    width: 20px;
    border-radius: 24px 0 0 24px;
    background: #b4e0a4;
  }

  .inbox-completed-row--late .inbox-completed-row__accent {
    background: #ffcb05;
  }

  .inbox-completed-row__face {
    inset: 1px 1px 1px 5px;
    border-radius: 21px;
    background: #ffffff;
  }

  .inbox-completed-row__meta {
    color: #0b2346;
    font-size: 15px;
    font-weight: 400;
    line-height: 16px;
  }

  .inbox-completed-row__text {
    font-size: 14px;
    line-height: 16px;
  }

  .inbox-completed-row__title {
    font-size: 15px;
    font-weight: 700;
  }

  .inbox-completed-row__company {
    margin-left: 4px;
    color: #0b2346;
    font-size: 14px;
  }

  .inbox-completed-row__cash {
    position: relative;
    z-index: 2;
    color: #0b2346;
    font-size: 14px;
    font-weight: 700;
  }

  .inbox-refusal-card {
    box-sizing: border-box;
    height: 72px;
    min-height: 72px;
    gap: 1px;
    padding: 11px 20px;
    border: 0;
    border-radius: 24px;
    background: #f3f4f6;
    box-shadow: none;
  }

  .inbox-refusal-card__meta {
    gap: 0;
  }

  .inbox-refusal-card__datetime {
    color: #5e6a70;
    font-size: 15px;
    line-height: 16px;
  }

  .inbox-refusal-card__title {
    color: #5e6a70;
    font-size: 16px;
    line-height: 16px;
  }

  .inbox-refusal-card__reason {
    color: #273942;
    font-size: 13px;
    font-style: italic;
    line-height: 16px;
  }

  .inbox-refusal-card--discrepancy {
    background: rgba(219, 55, 45, 0.15);
  }

  .refusal-category-section--discrepancy .inbox-section-pill {
    border-color: transparent;
    background: rgba(219, 55, 45, 0.15);
  }
}

.dark .schedule-three-day-free {
  background: rgba(16, 43, 82, 0.74);
  border-color: rgba(255, 255, 255, 0.18);
}

.dark .schedule-map-status {
  background: rgba(16, 43, 82, 0.88);
  color: var(--fsm-foreground);
}

.dark .schedule-map-status--danger {
  background: rgba(251, 44, 54, 0.86);
  color: #ffffff;
}


.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.05rem 0;
  font-size: 0.74rem;
  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);
}

.dark .tasks-mobile-page--schedule .tasks-mobile-route-subtitle::before,
.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.74rem;
  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 0.75rem;
}

.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);
}

.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);
}

.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);
}

.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;
}

.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 {
  --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 {
  --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 {
  --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);
  }

  .dark .monitorings-form-shell-card .card-body:first-child {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  }
}

/* Extracted sync/offline indicator styles to `assets/styles/components/sync-widget.css`. */

/* Extracted additional shell helpers to `assets/styles/shell.css`. */

/* 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;
  }
}

/* Extracted compact bottom-nav helpers to `assets/styles/shell.css`. */

/* Extracted datepicker styles to `assets/styles/components/datepicker.css`. */

.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-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;
}

.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%;
  }
}

/* Shared Figma foundation components: selectors, tags, schedule cards, and action dock. */
.fsm-segmented-control {
  position: relative;
  display: grid;
  /* Explicit column counts — do not use repeat(var(--fsm-segmented-count)):
     invalid/unsupported custom-property repeat() drops the declaration and
     stacks all items in one column (broken Schedule icon toggle). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  min-height: 48px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  background: #ffffff;
  isolation: isolate;
}

.fsm-segmented-control--profile {
  max-width: 382px;
  height: 50px;
  min-height: 50px;
  margin-inline: auto;
}

.fsm-segmented-control--inbox {
  max-width: 368px;
  margin-inline: auto;
  border-radius: 28px;
}

.fsm-segmented-control--schedule {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 195px;
  min-height: 44px;
  height: 44px;
  max-width: none;
  margin-inline: 0;
  border-radius: 999px;
  /* Flex row is the schedule layout source of truth; keep an explicit grid
     fallback for any intermediate paint before this rule loads. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fsm-segmented-control--schedule .fsm-segmented-control__item {
  flex: 1 1 0;
  min-height: 40px;
  flex-direction: row;
  border-radius: 999px;
  gap: 0;
  padding: 0;
}

.fsm-segmented-control__thumb {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  width: 25%;
  border-radius: 24px;
  background: #0b2346;
  transform: translateX(0);
  transition: transform 220ms ease;
  pointer-events: none;
  /* Never participate in grid/flex auto-placement. */
  grid-column: 1 / -1;
  grid-row: 1;
}

.fsm-segmented-control--inbox .fsm-segmented-control__thumb {
  border-radius: 28px;
}

.fsm-segmented-control--schedule .fsm-segmented-control__thumb {
  border-radius: 999px;
}

.fsm-segmented-control__thumb--destructive {
  background: #f47873;
}

.fsm-segmented-control__thumb--no-animate {
  transition: none;
}

.fsm-segmented-control__item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-width: 0;
  min-height: 46px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 4px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: #0b2346;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}

.fsm-segmented-control--inbox .fsm-segmented-control__item {
  border-radius: 28px;
}

.fsm-segmented-control__item:hover,
.fsm-segmented-control__item:focus-visible {
  background: rgba(11, 35, 70, 0.08);
  outline: none;
}

.fsm-segmented-control__item--active:hover,
.fsm-segmented-control__item--active:focus-visible {
  background: transparent;
}

.fsm-segmented-control__item:focus-visible,
.fsm-schedule-free-slot:focus-visible,
.fsm-visit-action-dock__action:focus-visible,
.fsm-visit-scope-control__input:focus-visible + .fsm-visit-scope-control__track {
  box-shadow: 0 0 0 2px #006ef5;
}

.fsm-segmented-control__item--active,
.fsm-segmented-control__item--active:hover,
.fsm-segmented-control__item--active:focus-visible {
  background: transparent;
  color: #ffffff;
}

.fsm-segmented-control__item--destructive {
  color: #f47873;
}

.fsm-segmented-control__item--destructive.fsm-segmented-control__item--active {
  background: transparent;
  color: #ffffff;
}

.fsm-segmented-control__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fsm-segmented-control__icon {
  display: inline-flex;
}

.fsm-segmented-control__count {
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
}

.fsm-segmented-control__badge-dot {
  position: absolute;
  top: 1px;
  right: 9px;
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 999px;
  background: #db372d;
}

.fsm-status-chip {
  /* Figma Tag (338:676): 16× pill, radius 9, Inter Semi Bold 14 / leading 0.85.
     Label inset is top 6.25% / bottom 12.5% (~1px / 2px) so the glyph sits
     optically centered — Inter Cyrillic reads low with geometric flex centering. */
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  height: 16px;
  min-height: 16px;
  padding: 1px 5px 2px;
  overflow: hidden;
  border-radius: 9px;
  color: #0b2346;
  font-size: 14px;
  font-weight: 600;
  line-height: 0.85;
  text-align: center;
  white-space: nowrap;
}

.fsm-status-chip--new { background: #b4e0a4; }
.fsm-status-chip--renewal { background: #f47873; }
.fsm-status-chip--receivables { background: #ffe78f; }
.fsm-status-chip--prospect { background: #8fd9ee; }
.fsm-status-chip--success { background: #e6ffdd; }
.fsm-status-chip--critical { background: #db372d; color: #ffffff; }

.inbox-task-card__tags {
  gap: 2px;
}

.fsm-schedule-job-card {
  /* Figma JobCardCorp (1:228): 371×110, radius 24, left status rail.
     Inbox planned/regular cards add .inbox-job-card only as a host hook —
     geometry and rails stay here, never forked in Inbox-local soft-card rules. */
  --fsm-schedule-card-accent: #0b2346;
  --fsm-schedule-card-time: #0b2346;
  --fsm-schedule-card-title: #0b2346;
  --fsm-schedule-card-ring: #e2e8f0;
  --fsm-schedule-card-face: #ffffff;
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 371px;
  min-height: 110px;
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  /* Ring shadow (not CSS border) so overflow clips the true outer 24px silhouette. */
  border: none;
  border-radius: 24px;
  background: var(--fsm-schedule-card-face);
  box-shadow:
    0 0 0 1px var(--fsm-schedule-card-ring),
    0 2px 8px rgba(0, 0, 0, 0.05);
  color: #273942;
  text-align: left;
  text-decoration: none;
  isolation: isolate;
  transform: translateZ(0);
}

/*
 * Figma layers (1:228) translated for ring-shadow (no CSS border box):
 *   Status Stripe 303:359 — x=1 y=1 w=25, left radii 23  → flush 0 / w=26 / r=24
 *   White face 303:360    — x=7 y=1, radius 21           → left 6 / r=21
 * Mid-body visible navy is ~6px; the face's 21px corners curve away and reveal
 * the wide stripe's rounded ends — that pill tip is what a flat thin bar misses.
 * The 6px inset + 21px face radius are shared by every status color/height
 * (radius auto-clamps to the shorter completed pill, so no per-height override
 * is needed here) — only accent width/radius vary per card height, see the
 * `--completed` block below. Never re-skip this ::after for a status color;
 * that reintroduces a plain whole-card ring instead of a real left rail.
 */
.fsm-schedule-job-card::after {
  content: "";
  position: absolute;
  inset: 0 0 0 6px;
  z-index: 1;
  border-radius: 21px;
  background: var(--fsm-schedule-card-face);
  pointer-events: none;
}

.fsm-schedule-job-card:not(.schedule-three-day-card):not(.fsm-schedule-job-card--completed) {
  height: 110px;
}

button.fsm-schedule-job-card,
button.fsm-schedule-free-slot {
  cursor: pointer;
}

.fsm-schedule-job-card:hover,
.fsm-schedule-job-card:focus-visible {
  --fsm-schedule-card-ring: #006ef5;
  outline: none;
}

.fsm-schedule-free-slot:hover,
.fsm-schedule-free-slot:focus-visible {
  border-color: #0b2346;
  outline: none;
}

.fsm-schedule-job-card--unconfirmed {
  --fsm-schedule-card-accent: #6b7280;
  --fsm-schedule-card-time: #5e6a70;
  --fsm-schedule-card-title: #6b7280;
}

.fsm-schedule-job-card--inquiry { --fsm-schedule-card-accent: #ffcb05; }

.fsm-schedule-job-card--cancelled {
  --fsm-schedule-card-accent: #f47873;
  --fsm-schedule-card-time: #0b2346;
  --fsm-schedule-card-title: #0b2346;
}

/* Wide Status Stripe (not a thin 6px bar) so left radii stay soft, not pointed. */
.fsm-schedule-job-card__accent {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 26px;
  border-radius: 24px 0 0 24px;
  background: var(--fsm-schedule-card-accent);
  z-index: 0;
  pointer-events: none;
}

.fsm-schedule-job-card__content {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1px;
  padding: 19px 14px 18px 25px;
}

.fsm-schedule-job-card__time,
.fsm-schedule-job-card__title,
.fsm-schedule-job-card__company,
.fsm-schedule-job-card__address {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fsm-schedule-job-card__time {
  color: var(--fsm-schedule-card-time);
  font-size: 15px;
  font-weight: 700;
  line-height: 15px;
}

.fsm-schedule-job-card__title {
  color: var(--fsm-schedule-card-title);
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
}

.fsm-schedule-job-card__company,
.fsm-schedule-job-card__address {
  color: #273942;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
}

.fsm-schedule-job-card__address {
  margin-top: 6px;
}

.fsm-schedule-job-card__tags {
  position: absolute;
  top: 13px;
  right: 14px;
  z-index: 2;
  display: grid;
  justify-items: end;
  gap: 2px;
}

.fsm-schedule-job-card--completed {
  /* Figma Job Card Corp completed instance (234:552): 371×36, radius 18 (clamped
     from a 24px token by box height, same as the 371×110 card clamping to 24).
     Status Stripe x=1 y=1 w=35 (radius 23, clamped ~17 by its own 34px height)
     → flush 0 / w=36 / r=18 (parent radius, per the shared corner-stack rule).
     Face fill is the SAME #e6ffdd as the card background (not white) — only the
     accent color differs from the other statuses, so it must reuse the shared
     accent + face stack, not a plain whole-card ring. */
  min-height: 36px;
  height: 36px;
  --fsm-schedule-card-accent: #b4e0a4;
  --fsm-schedule-card-face: #e6ffdd;
  border-radius: 18px;
  background: #e6ffdd;
  box-shadow: 0 0 0 1px var(--fsm-schedule-card-ring);
}

.fsm-schedule-job-card--completed .fsm-schedule-job-card__accent {
  width: 36px;
  border-radius: 18px 0 0 18px;
}

.fsm-schedule-job-card--completed .fsm-schedule-job-card__completed-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: 0 24px;
  color: #0b2346;
  font-size: 15px;
  line-height: 1;
}

.fsm-schedule-job-card__completed-time,
.fsm-schedule-job-card__completed-title {
  font-weight: 700;
}

.fsm-schedule-free-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  /* Figma Job Card Corp free slot 308:609: 371×56, radius 31, 1.5px dashed */
  width: 100%;
  min-height: 56px;
  height: 56px;
  gap: 8px;
  padding: 7px 8px 7px 25px;
  border: 1.5px dashed #0b2346;
  border-radius: 31px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  color: #0b2346;
  text-align: left;
  text-decoration: none;
}

.fsm-schedule-free-slot__body {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.fsm-schedule-free-slot__time {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: #0b2346;
  white-space: nowrap;
}

.fsm-schedule-free-slot__label {
  color: #0b2346;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.fsm-schedule-free-slot__icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  /* Figma FAB 44:281 — solid Brand/Secondary disc + white plus */
  background: #ffcb05;
  color: #ffffff;
  box-shadow: none;
}

.fsm-schedule-free-slot__icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.fsm-schedule-product-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: baseline;
  min-height: 56px;
  padding: 8px 18px;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #ffffff;
  color: #273942;
  font-size: 14px;
}

.fsm-schedule-product-row__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.fsm-schedule-product-row__amount { color: #0b2346; font-weight: 700; }

.fsm-visit-action-dock {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 0;
  box-sizing: border-box;
  width: 100%;
  /* Figma 1222:2667 compact Bottom UI: 412×112, 15px top, 64×54 / 200×54. */
  height: calc(var(--fsm-visit-dock-h) + env(safe-area-inset-bottom, 0px));
  min-height: calc(var(--fsm-visit-dock-h) + env(safe-area-inset-bottom, 0px));
  padding: 15px max(16px, calc((100% - 278px) / 2)) calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #e2e8f0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 18px 18px 0 0;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.fsm-visit-action-dock--datetime {
  /* Figma 1207:2643: 412×176, 24px top, 40px date pill, same 54px actions. */
  grid-template-rows: auto auto auto;
  height: calc(var(--fsm-visit-dock-h-datetime) + env(safe-area-inset-bottom, 0px));
  min-height: calc(var(--fsm-visit-dock-h-datetime) + env(safe-area-inset-bottom, 0px));
  padding-top: 24px;
  row-gap: 15px;
  border-radius: 24px 24px 0 0;
}

.fsm-visit-action-dock--datetime .fsm-visit-action-dock__scope {
  display: flex;
  justify-content: center;
  width: 100%;
}

.fsm-visit-action-dock--datetime .fsm-visit-action-dock__more {
  margin-top: 0;
}

.fsm-visit-action-dock__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.fsm-visit-action-dock__action {
  display: inline-flex;
  box-sizing: border-box;
  min-width: 0;
  height: var(--fsm-visit-dock-action-h);
  min-height: var(--fsm-visit-dock-action-h);
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  overflow: visible;
  border: 0;
  border-radius: 24px;
  background: #cbe2ff;
  color: #0b2346;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}

.fsm-visit-action-dock__label {
  display: inline-block;
  overflow: visible;
  line-height: 1.25;
  white-space: nowrap;
}

.fsm-visit-action-dock__action:hover,
.fsm-visit-action-dock__action:focus-visible {
  background: #bdd9fb;
  outline: none;
}

.fsm-visit-action-dock__action--primary,
.fsm-visit-action-dock__action--primary:hover,
.fsm-visit-action-dock__action--primary:focus-visible {
  background: #006ef5;
  color: #ffffff;
}

.fsm-visit-action-dock__action--call,
.fsm-visit-action-dock__action--reschedule {
  flex: 0 0 var(--fsm-visit-dock-call-w);
  width: var(--fsm-visit-dock-call-w);
  padding: 0;
}

.fsm-visit-action-dock__action--primary {
  flex: 0 0 var(--fsm-visit-dock-primary-w);
  width: var(--fsm-visit-dock-primary-w);
  max-width: var(--fsm-visit-dock-primary-w);
}

/* Full-button Figma secondary exports already paint fill + glyph. */
.fsm-visit-action-dock__action--asset,
.fsm-visit-action-dock__action--asset:hover,
.fsm-visit-action-dock__action--asset:focus-visible {
  padding: 0;
  background: transparent;
  overflow: hidden;
}

.fsm-visit-action-dock__action--asset:hover,
.fsm-visit-action-dock__action--asset:focus-visible {
  opacity: 0.92;
  outline: none;
}

.fsm-visit-action-dock__asset {
  display: block;
  width: var(--fsm-visit-dock-call-w);
  height: var(--fsm-visit-dock-action-h);
  pointer-events: none;
  object-fit: fill;
}

.fsm-visit-action-dock__icon-asset {
  display: block;
  flex: 0 0 auto;
  width: 29px;
  height: auto;
  max-height: 29px;
  pointer-events: none;
}

.fsm-visit-action-dock__action svg {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  overflow: visible;
}

.fsm-visit-action-dock__more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  margin-top: 15px;
}

.fsm-visit-action-dock__more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #273942;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

.fsm-visit-action-dock__more-btn:hover,
.fsm-visit-action-dock__more-btn:focus-visible {
  color: #0b2346;
  outline: none;
}

.fsm-visit-scope-control {
  display: flex;
  box-sizing: border-box;
  width: 316px;
  max-width: 100%;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 0 15px 0 15px;
  border-radius: 24px;
  background: #f8fafc;
  color: #273942;
  font-size: 14px;
  font-weight: 400;
  line-height: 25px;
}

.fsm-visit-scope-control__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fsm-visit-scope-control:has(.fsm-visit-scope-control__input:checked) {
  background: rgba(11, 35, 70, 0.12);
  color: #0b2346;
}

.fsm-visit-scope-control:has(.fsm-visit-scope-control__input:checked) .fsm-visit-scope-control__label {
  color: #0b2346;
  font-weight: 700;
}

.fsm-visit-scope-control__switch {
  position: relative;
  display: inline-flex;
  width: 50px;
  height: 22px;
  flex: 0 0 auto;
}

.fsm-visit-scope-control__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.fsm-visit-scope-control__track {
  width: 100%;
  height: 100%;
  border-radius: 17px;
  background: #d9d9d9;
  transition: background-color 160ms ease;
}

.fsm-visit-scope-control__track::after {
  display: block;
  width: 18px;
  height: 18px;
  margin: 2px;
  border-radius: 12px;
  background: #ffffff;
  content: "";
  transition: transform 160ms ease;
}

.fsm-visit-scope-control__input:checked + .fsm-visit-scope-control__track {
  background: #006ef5;
}

.fsm-visit-scope-control__input:checked + .fsm-visit-scope-control__track::after {
  transform: translateX(28px);
}

.job-profile-planning-scope {
  width: 316px;
  max-width: 100%;
  /* Figma 182:479 Кога control: left-[calc(50%-28px)] → ~20px inset on 412, not centered. */
  margin: 12px 0 0;
}

.dark .fsm-segmented-control,
.dark .fsm-schedule-free-slot,
.dark .fsm-visit-action-dock {
  border-color: var(--fsm-line-1);
  background: var(--fsm-card);
}

.dark .fsm-schedule-job-card {
  --fsm-schedule-card-ring: var(--fsm-line-1);
  --fsm-schedule-card-face: var(--fsm-card);
  background: var(--fsm-schedule-card-face);
}

.dark .fsm-segmented-control__item,
.dark .fsm-schedule-job-card__company,
.dark .fsm-schedule-job-card__address,
.dark .fsm-schedule-free-slot,
.dark .fsm-schedule-product-row,
.dark .fsm-visit-scope-control {
  color: var(--fsm-foreground);
}

.dark .fsm-schedule-product-row { border-color: var(--fsm-line-1); }
.dark .fsm-segmented-control__thumb { background: var(--fsm-primary); }
.dark .fsm-segmented-control__thumb--destructive { background: #f47873; }
.dark .fsm-segmented-control__item--active {
  background: transparent;
  color: var(--fsm-primary-foreground);
}

/* Shared primitives retain the compact stacked treatment in the three-day grid.
 * Map carousel cards need Figma soft shadow (0.2) — do not re-weaken to 0.05. */
.fsm-schedule-job-card.schedule-map-task-card,
.fsm-schedule-job-card.schedule-map-task-card.schedule-map-task-card--active,
.fsm-schedule-job-card.schedule-map-task-card.schedule-map-task-card--next {
  max-width: 300px;
  margin-inline: 0;
  /* Soft drop shadow paints outside the 24px silhouette; rail still self-radiused. */
  overflow: visible;
  box-shadow:
    0 0 0 1px var(--fsm-schedule-card-ring, #e2e8f0),
    0 2px 8px rgba(0, 0, 0, 0.2);
}

.fsm-schedule-job-card.schedule-three-day-card,
.fsm-schedule-free-slot.schedule-three-day-free {
  width: auto;
  max-width: none;
  height: auto;
  min-height: 0;
  margin-inline: 0;
}

.fsm-schedule-job-card.schedule-three-day-card {
  --fsm-schedule-card-face: #fbfbfb;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  background: #fbfbfb;
  box-shadow: 0 0 0 1px var(--fsm-schedule-card-ring, #e2e8f0);
  text-align: center;
}

/* Figma 3-day Job stripe is 12px @ 1px inset → flush 13px under ring-shadow.
   Face starts ~4px from the card left (node 308:734). */
.fsm-schedule-job-card.schedule-three-day-card::after {
  inset: 0 0 0 4px;
  border-radius: 11px;
  background: var(--fsm-schedule-card-face, #fbfbfb);
}

.fsm-schedule-job-card.schedule-three-day-card .fsm-schedule-job-card__accent {
  top: 0;
  bottom: 0;
  left: 0;
  width: 13px;
  border-radius: 12px 0 0 12px;
}

.fsm-schedule-job-card.schedule-three-day-card .fsm-schedule-job-card__content {
  gap: 2px;
  padding: 4px 6px 4px 10px;
  justify-items: center;
  align-content: center;
}

.fsm-schedule-job-card.schedule-three-day-card .fsm-schedule-job-card__time {
  display: none;
}

.fsm-schedule-job-card.schedule-three-day-card .fsm-schedule-job-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  color: var(--fsm-schedule-card-title, #0b2346);
}

.fsm-schedule-job-card.schedule-three-day-card .fsm-schedule-job-card__company,
.fsm-schedule-job-card.schedule-three-day-card .fsm-schedule-job-card__address {
  display: none;
}

.fsm-schedule-job-card.schedule-three-day-card--main {
  --fsm-schedule-card-face: #0b2346;
  --fsm-schedule-card-title: #ffffff;
  --fsm-schedule-card-accent: #0b2346;
  background: #0b2346;
  box-shadow:
    0 0 0 0.5px #0b2346,
    0 0 8px rgba(0, 0, 0, 0.1);
}

.fsm-schedule-job-card.schedule-three-day-card--main::after,
.fsm-schedule-job-card.schedule-three-day-card--main .fsm-schedule-job-card__accent {
  display: none;
}

.fsm-schedule-job-card.schedule-three-day-card--main .fsm-schedule-job-card__title {
  color: #ffffff;
}

.fsm-schedule-free-slot.schedule-three-day-free {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  min-height: 0;
  padding: 10px 40px 9px 11px;
  border: 1.5px dashed #0b2346;
  border-radius: 12px;
  background: #fbfbfb;
  box-shadow: none;
  text-align: center;
}

.fsm-schedule-free-slot.schedule-three-day-free .fsm-schedule-free-slot__body {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.fsm-schedule-free-slot.schedule-three-day-free .fsm-schedule-free-slot__time {
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
}

.fsm-schedule-free-slot.schedule-three-day-free .fsm-schedule-free-slot__label {
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.fsm-schedule-free-slot.schedule-three-day-free .fsm-schedule-free-slot__icon {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 32px;
  height: 32px;
  color: #ffffff;
}

/* The routed form footer supplies positioning; the Figma dock owns its surface. */
footer.form-footer:has(.fsm-visit-action-dock) {
  left: 0;
  right: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}

footer.form-footer:has(.fsm-visit-action-dock)::after {
  background: #ffffff;
}

/* Datetime dock (176px) owns the white panel — do not re-paint the form footer. */
footer.form-footer:has(.job-reschedule-footer)::after {
  display: none;
}