/* Theme Variables */
:root {
  --color-primary: #3E9D77;
  --color-bg: #fff;
  --color-text: #222;
  /* Sidebar theme variables */
  --sidebar-text: #000000;
  --sidebar-bg: #F9F9F9;
  --sidebar-link-hover-bg: #2FDF851A;
  --sidebar-link-hover-text: inherit;

  /* shadcn/ui design tokens mapped to Boon brand colors */
  --background: 0 0% 99%;              /* neutral-white #FCFCFC */
  --foreground: 0 0% 18%;              /* neutral-black #2E2E2E */
  --card: 0 0% 99%;
  --card-foreground: 0 0% 18%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 18%;
  --primary: 153 43% 43%;              /* brand-everpine-700 #3E9D77 */
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 96%;               /* gray-50 */
  --secondary-foreground: 0 0% 18%;
  --muted: 0 0% 95%;                   /* gray-100 */
  --muted-foreground: 0 0% 45%;        /* gray-500 */
  --accent: 151 76% 93%;               /* brand-everpine-50 #E0FAED */
  --accent-foreground: 0 0% 18%;
  --destructive: 4 75% 49%;            /* error-600 #D92D20 */
  --destructive-foreground: 0 0% 100%;
  --border: 220 13% 91%;               /* gray-200 #E5E7EB */
  --input: 220 13% 91%;
  --ring: 153 43% 43%;                 /* brand-everpine-700 #3E9D77 */
  --radius: 0.5rem;

  /* Font family for portaled elements (createPortal to document.body).
   * Must match the `figtree` fontFamily in config/tailwind.config.js.
   * Portaled elements escape the `font-figtree` class applied by wrapper
   * components (e.g. DeltaDetailContainer) and fall back to Inter var from
   * Tailwind's html preflight — which is visually different from Figtree.
   * Use via: style={{ fontFamily: 'var(--boon-font-family)' }}
   * OR: add className="font-figtree" directly to the portaled element.
   * Update here when the app font changes (and update tailwind.config.js). */
  --boon-font-family: 'Figtree', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

[data-theme="dark"] {
  --color-primary: #0ea5e9;
  --color-bg: #18181b;
  --color-text: #f4f4f5;
  /* Sidebar theme variables */
  --sidebar-text: #ffffff;
  --sidebar-bg: #0b0b0b;
  --sidebar-link-hover-bg: #a4c5b4;
  --sidebar-link-hover-text: #000000;
}

@tailwind base;
@tailwind components;
@tailwind utilities;


/* Custom select chevron background */
.bg-svg-chevron {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

/* Indeterminate checkbox styling */
input[type="checkbox"]:indeterminate {
  -webkit-appearance: none;
  appearance: none;
  background-color: #15803d; /* green-700 to match the theme */
  border-color: #15803d;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/*

@layer components {
  .btn-primary {
    @apply py-1 px-4 bg-blue-200;
  }
}

*/
.pagy-nav.pagination {
  @apply isolate -space-x-px rounded-md my-5 text-xs text-center;
}

.page.next a {
  @apply relative inline-flex items-center rounded-r-md px-1 py-1 font-medium text-gray-700 hover:bg-gray-50 hover:rounded-md focus:z-20;
}

.page.prev a {
  @apply relative inline-flex items-center rounded-l-md px-1 py-1 font-medium text-gray-700 hover:bg-gray-50 hover:rounded-md focus:z-20;
}

.page.next.disabled {
  @apply relative inline-flex items-center rounded-r-md px-1 py-1 font-medium text-gray-400 hover:bg-gray-50 hover:rounded-md focus:z-20;
}

.page.prev.disabled {
  @apply relative inline-flex items-center rounded-l-md px-1 py-1 font-medium text-gray-400 hover:bg-gray-50 hover:rounded-md focus:z-20;
}

.page a,
.page.gap {
  @apply text-gray-700 hover:bg-gray-50 rounded-md relative inline-flex items-center px-2 py-1 font-medium focus:z-20;
}

.page.active {
  @apply z-10 bg-primary-50 rounded-md text-primary-600 relative inline-flex items-center px-2 py-1 font-medium focus:z-20;
}

.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
  background-color: rgba(17, 24, 39, 0.5);
  z-index: 30;
  inset: 0;
}

/* ENG-12501: register --gradient-angle as a real <angle> so the Takeoff
   "generating" conic-gradient ring (PageThumbnailCard) and the RainbowButton
   family can interpolate it. An UNregistered custom property is a universal
   string and cannot be animated as an angle — that's why the ring failed to
   paint locally. Mirrors the @property --ti-angle pattern in
   TiHighlightKeyframes.tsx. */
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes gradient-angle-rotate {
  from {
    --gradient-angle: 0deg;
  }
  to {
    --gradient-angle: 360deg;
  }
}

/* ENG-17756 — the cold-start use-case tile row.

   Two motions, and they are deliberately different things. The ROW opens by
   animating its own height, so everything under it (the skills band, the
   privacy row, the composer) is pushed down rather than jumping. `height: auto`
   is not animatable, so the wrapper is a 1-row grid animating 0fr -> 1fr, which
   is the same effect with no measured pixel value to keep in sync. The CARDS
   then arrive one at a time, each delayed a little further than the last — the
   row reads as being dealt rather than pasted in.

   The child must own `overflow: hidden` (not the grid), or the cards' focus
   rings clip while the row is open. */
.boon-tile-reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.boon-tile-reveal[data-open="true"] {
  grid-template-rows: 1fr;
}

.boon-tile-reveal > * {
  overflow: hidden;
}

@keyframes boon-tile-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.boon-tile-in {
  /* `backwards` so the card holds its pre-animation state during the stagger
     delay instead of flashing at full opacity first. Each card's own travel is
     a touch longer than the row's open, so a card is still settling as the next
     one starts — the sequence reads as continuous rather than as three
     separate pops. */
  animation: boon-tile-in 320ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

@media (prefers-reduced-motion: reduce) {
  .boon-tile-reveal,
  .boon-tile-in {
    transition: none;
    animation: none;
  }
}

.has-road-stripe {
  position: relative;
  /* Ensure pseudo-element is positioned relative to this */
}

.has-road-stripe::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  /* Center vertically */
  height: 2px;
  /* Line thickness */
  margin-top: -1px;
  /* Adjust for height to truly center */
  /* Dashed line using repeating linear gradient */
  background: repeating-linear-gradient(to right,
      #FBBF24,
      /* yellow-400 */
      #FBBF24 10px,
      /* Length of dash */
      transparent 10px,
      transparent 20px
      /* Length of dash + gap */
    );
  z-index: 1;
  /* Ensure it's above the gray fill, but below the truck (z-10) */
}

.flex-full-columns {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.flex-column-grow {
  flex-grow: 1;
  overflow-y: auto;
}

/* Custom classes for AG Grid fuel difference colors */
.boon-savings {
  /* Default Good = Green */
  @apply text-emerald-800 !important;
}

.boon-loss {
  /* Default Bad = Red */
  @apply text-red-600 !important;
}

.boon-zero-diff {
  @apply text-gray-500 !important;
}

.boon-savings-swapped {
  /* Swapped Good = Red */
  @apply text-red-600 !important;
}

.boon-loss-swapped {
  /* Swapped Bad = Green */
  @apply text-emerald-800 !important;
}

.boon-multiselect__input-container input:focus {
  @apply ring-0 outline-none;
}

.command-palette-input,
.command-palette-input:focus,
.command-palette-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
}
.command-palette-input:focus {
  border-color: #3E9D77 !important;
}

/* Custom classes for AG Grid */
.ag-header-cell-center {
  @apply text-center;
}

.ag-header-cell-center .ag-header-cell-label {
  @apply justify-center;
}

/* Custom styling for AG Grid in Agent Logs page */
#agentLogsGrid .ag-root-wrapper {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

#agentLogsGrid .ag-header {
  background-color: transparent;
}

/* Custom classes for scrollbar */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

/* Custom slider styling for Voice Agent Config */
input[type="range"].slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 8px !important;
  border-radius: 4px !important;
  outline: none !important;
  background: transparent !important;
}

/* Force remove all default browser styling */
input[type="range"].slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  background: white !important;
  background-color: white !important;
  border: 2px solid black !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  z-index: 999 !important;
}

input[type="range"].slider::-moz-range-thumb {
  -moz-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  background: white !important;
  background-color: white !important;
  border: 2px solid black !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  z-index: 999 !important;
}

input[type="range"].slider::-moz-range-track {
  height: 8px !important;
  border-radius: 4px !important;
  background: transparent !important;
  border: none !important;
}

input[type="range"].slider::-webkit-slider-runnable-track {
  height: 8px !important;
  border-radius: 4px !important;
  background: transparent !important;
}

/* Force override any browser default styling */
input[type="range"].slider:focus::-webkit-slider-thumb {
  background: white !important;
  background-color: white !important;
  border: 2px solid black !important;
}

input[type="range"].slider:focus::-moz-range-thumb {
  background: white !important;
  background-color: white !important;
  border: 2px solid black !important;
}

/* Extra specific styling for temperature slider */
.custom-temperature-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 2px solid #000000 !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  z-index: 999 !important;
}

.custom-temperature-slider::-moz-range-thumb {
  -moz-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 2px solid #000000 !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  z-index: 999 !important;
}

/* Custom range input styling with specified colors (black and white) */
.bw-range-slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 8px !important;
  border-radius: 4px !important;
  outline: none !important;
  cursor: pointer !important;
  width: 100% !important;
}

.bw-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 20px !important;
  width: 20px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 2px solid #0F172A !important;
  cursor: pointer !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-50%) !important;
  position: relative !important;
  top: 50% !important;
}

.bw-range-slider::-moz-range-thumb {
  height: 20px !important;
  width: 20px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 2px solid #0F172A !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  -moz-appearance: none !important;
  transform: translateY(-50%) !important;
}

.bw-range-slider::-ms-thumb {
  height: 20px !important;
  width: 20px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 2px solid #0F172A !important;
  cursor: pointer !important;
  transform: translateY(-50%) !important;
  position: relative !important;
  top: 50% !important;
}

.bw-range-slider::-moz-range-track {
  background: transparent !important;
  border: none !important;
  height: 8px !important;
  border-radius: 4px !important;
}

.bw-range-slider::-webkit-slider-runnable-track {
  background: transparent !important;
  height: 8px !important;
  border-radius: 4px !important;
}

.bw-range-slider::-ms-track {
  background: transparent !important;
  border-color: transparent !important;
  color: transparent !important;
  height: 8px !important;
}

/* Custom styling for table */
.boon-table {
  font-family: Figtree, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
  font-size: 14px;
  border-radius: 8px;
  overflow: hidden;
}

.boon-table thead {
  background-color: #596B65;
  color: #FCFCFC;
  height: 45px;
  border: solid 1px #596B65;
}

.boon-table th {
  font-weight: 600;
}

.boon-table tbody {
  background-color: #FCFCFC;
}

.boon-table tbody tr {
  border: solid 1px rgba(46, 46, 46, 0.15);
}

.boon-table tbody tr:hover {
  background-color: #2fdf8514;
}

.boon-table tbody td {
  color: #2E2E2E;
}

/* Workflow Analytics Component Styles */
.workflow-analytics-dashboard {
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.analytics-card {
  @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6 transition-shadow duration-200;
}

.analytics-card:hover {
  @apply shadow-md;
}

/* React Flow customization for Takeoff Intelligence canvas */
/* Scoped to .takeoff-canvas-container to avoid affecting workflow builder */
.takeoff-canvas-container .react-flow__pane {
  cursor: inherit !important;
}

/* Override React Flow's selectable node cursor and pointer events */
/* The bounding box should not intercept mouse events - let them pass through to the pane */
/* This allows drawing measurements in the empty space around polygons */
.takeoff-canvas-container .react-flow__node-polylineNode.selectable,
.takeoff-canvas-container .react-flow__node-polygonNode.selectable,
.takeoff-canvas-container .react-flow__node-countMeasurementNode:not(:has(> .read-only)) {
  cursor: default !important;
  pointer-events: none !important;
}

.takeoff-canvas-container .react-flow__node-polylineNode.selectable.selected,
.takeoff-canvas-container .react-flow__node-polygonNode.selectable.selected {
  cursor: default !important;
  pointer-events: none !important;
}

/* Let child elements (like SVG paths) control their own cursor and pointer events */
.takeoff-canvas-container .react-flow__node-polylineNode.selectable *,
.takeoff-canvas-container .react-flow__node-polygonNode.selectable * {
  cursor: inherit;
}

/* React Colorful Advanced Color Picker Styling */
.react-colorful-container .react-colorful {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  --react-colorful-saturation-pointer-size: 16px;
  --react-colorful-hue-pointer-size: 16px;
}

.react-colorful-container .react-colorful__saturation {
  border-radius: 0;
  margin-bottom: 0;
  order: 2
}

.react-colorful-container .react-colorful__hue {
  height: 16px;
  border-radius: 8px;
  margin: 8px 16px 16px;
  order: 1;
}

.react-colorful-container .react-colorful__pointer {
  width: var(--react-colorful-saturation-pointer-size);
  height: var(--react-colorful-saturation-pointer-size);
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.react-colorful-container .react-colorful__hue-pointer {
  width: var(--react-colorful-hue-pointer-size);
  height: var(--react-colorful-hue-pointer-size);
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Hide drag indicators and header controls for column groups */
.no-drag-indicator .ag-header-group-cell-label::before,
.no-drag-indicator .ag-icon-menu,
.no-drag-indicator .ag-header-icon,
.no-drag-indicator .ag-header-cell-resize {
  @apply !opacity-0;
}

/*
 * AG Grid search inputs (set-filter "value selector" mini search + the column
 * menu's "Choose Columns" search) render a leading magnifier icon. Without a
 * text offset the placeholder ("Search…") and typed value sit directly under
 * the icon. Use text-indent (NOT padding-left) so only the text shifts — the
 * icon stays put whether it's a separate element (column chooser) or a
 * background image (set-filter mini search); padding-left would push a
 * background icon along with the text and keep them overlapping.
 */
.ag-mini-filter .ag-input-field-input,
.ag-column-select-header-filter-wrapper .ag-input-field-input,
.ag-filter-toolpanel-search-input {
  text-indent: 1.5rem;
}

.lighter-theme .ag-pinned-right-header,
.lighter-theme .ag-pinned-right-cols-container {
  box-shadow: -4px 0 12px 0 rgba(0, 0, 0, 0.1);
}

/* Dense cost estimate grid — compact cell rendering and editing */
.cost-estimate-dense-theme .ag-group-contracted,
.cost-estimate-dense-theme .ag-group-expanded {
  height: 100%;
  display: flex;
  align-items: center;
}
.cost-estimate-dense-theme .ag-cell-wrapper {
  align-items: center;
}
/* Constrain inline cell editors to row height */
.cost-estimate-dense-theme .ag-cell-edit-wrapper,
.cost-estimate-dense-theme .ag-cell-editor {
  height: 100%;
}
.cost-estimate-dense-theme .ag-cell-edit-wrapper input,
.cost-estimate-dense-theme .ag-number-field-input,
.cost-estimate-dense-theme .ag-text-field-input {
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 10px;
  box-sizing: border-box;
}
.measurement-grid-scroll .ag-cell-inline-editing .measurement-cell-editor-input {
  height: auto;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
}
/* AG Grid strips cell padding while inline-editing (padding: 0 on
   .ag-cell-inline-editing), so the editor would touch the cell walls.
   Restore the same horizontal inset the display cell uses. */
.measurement-grid-scroll .ag-cell-inline-editing .measurement-cell-editor-wrapper {
  padding-left: var(--ag-cell-horizontal-padding);
  padding-right: var(--ag-cell-horizontal-padding);
}
/* AG Grid's Theming API draws its own editing chrome around the cell
   (cellEditingBorder = accent green + cellEditingShadow card shadow), which
   doubles up with the editor input's own border. Keep only the input frame;
   restore the dense theme's normal column separator. */
.measurement-grid-scroll .ag-cell-inline-editing {
  border: none !important;
  border-right: var(--ag-cell-horizontal-border) !important;
  border-radius: 0;
  box-shadow: none;
}
/* Compact header font — matches dense grid text */
.cost-estimate-dense-theme .ag-header-cell-label {
  font-size: 10px;
}
.cost-estimate-dense-theme .ag-header-group-text {
  font-size: 10px;
}

/* UoM dropdown — match row height and compact width */
.cost-estimate-dense-theme .ag-rich-select {
  height: 28px !important;
  min-height: 28px !important;
}
.cost-estimate-dense-theme .ag-rich-select-value {
  height: 28px !important;
  line-height: 28px !important;
  padding: 0 4px !important;
  font-size: 10px;
}

/*
 * Takeoff V2 measurement panel scrollbar (Cristian preview blocker #6).
 * The native horizontal scrollbar was thin and hard to grab. We overlay the scroll
 * viewport across the whole panel (position:absolute + width:100%) so the bar spans the
 * FULL panel width, and restyle it: an 18px bar, a rounded grabbable thumb, arrow
 * step-buttons. Scoped to .measurement-grid-scroll so the estimation CostEstimateGrid
 * (shares .cost-estimate-dense-theme) is untouched. !important beats AG Grid's inline
 * sizing. The overlaid viewport is wider than the scrollable centre, so on its own its
 * scroll range would differ from .ag-center-cols-viewport and AG Grid's 1:1 sync would
 * jitter on drag — the range bridge in MeasurementGrid.tsx pads the scroll container so
 * the ranges match, keeping the drag smooth and the last columns reachable.
 */
.measurement-grid-scroll .ag-body-horizontal-scroll {
  position: relative !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  overflow: visible !important;
}
.measurement-grid-scroll .ag-body-horizontal-scroll-viewport {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
}
.measurement-grid-scroll .ag-body-horizontal-scroll-container {
  height: 18px !important;
}
.measurement-grid-scroll .ag-body-horizontal-scroll-viewport::-webkit-scrollbar {
  height: 18px;
}
.measurement-grid-scroll .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track {
  background: #fff; /* white track — matches the panel background */
}
.measurement-grid-scroll .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb {
  min-width: 120px; /* long, easy-to-grab handle on the full-width bar */
  border-radius: 9999px;
  background: #9CA3AF; /* neutral-400 */
  background-clip: padding-box;
  border: 2px solid transparent; /* thin inset -> ~16px-tall thumb inside the 18px track */
}
.measurement-grid-scroll .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover {
  background: #6B7280; /* neutral-500 */
  background-clip: padding-box;
  border: 2px solid transparent;
}
/* Arrow step-buttons at each end. A custom WebKit scrollbar drops the native
   buttons, so the glyphs are drawn as inline-SVG backgrounds on the button pseudo. */
.measurement-grid-scroll .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-button {
  display: block;
  width: 18px;
  height: 18px;
  background-color: #fff; /* white — matches the track */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}
.measurement-grid-scroll .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-button:hover {
  background-color: #D1D5DB; /* neutral-300 */
}
.measurement-grid-scroll .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-button:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M5.5 1.5L2.5 4L5.5 6.5Z' fill='%236B7280'/%3E%3C/svg%3E");
}
.measurement-grid-scroll .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-button:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M2.5 1.5L5.5 4L2.5 6.5Z' fill='%236B7280'/%3E%3C/svg%3E");
}
/* Single button at each end — hide the inner halves of the double-button pairs. */
.measurement-grid-scroll .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-button:start:increment,
.measurement-grid-scroll .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-button:end:decrement {
  display: none;
  width: 0;
}
/*
 * Firefox fallback ONLY. Firefox has no ::-webkit-scrollbar, so it gets the standard
 * styled scrollbar. This is gated behind @supports so it never reaches Chrome: setting
 * scrollbar-color/width there makes Chrome IGNORE every ::-webkit-scrollbar* rule above,
 * which silently shrinks the handle back to the thin native bar.
 */
@supports not selector(::-webkit-scrollbar) {
  .measurement-grid-scroll .ag-body-horizontal-scroll-viewport {
    scrollbar-width: auto;
    scrollbar-color: #9CA3AF #fff;
  }
}

/*
 * ENG-14004: zebra-stripe ONLY leaf measurement rows in the V2 takeoff table.
 * Scoped to .measurement-grid-scroll so the V1 CostEstimateGrid / Fees grids
 * (which share .cost-estimate-dense-theme but NOT this class) are untouched.
 * The :not() guards hand precedence to AG Grid's translucent selection/hover
 * backgrounds (the Theming API composites them over the row bg), so a selected
 * or hovered striped leaf shows the accent / hover tint, not the zebra grey.
 */
.measurement-grid-scroll
  .ag-row.leaf-row-alt:not(.ag-row-selected):not(.ag-row-hover) {
  /* Neutral grey between V1's neutral-100 (#F7F7F7) and neutral-200 (#EBEBEB):
     reads clearly against the #FCFCFC base while staying in V1's palette. */
  background-color: #F2F2F2;
}

/* BidLevelingGrid custom AG Grid cell selection and hover styles */
#bidLevelingGrid {
  /* Brand colors */
  --bid-leveling-everpine-50: #E0FAED;
  --bid-leveling-everpine-100: #E5FBF1;
  --bid-leveling-zest-100: #FFFEF1;
  --bid-leveling-gray-500: #6B7280;
  --bid-leveling-gray-400: #9CA3AF;
  --bid-leveling-fizz-900: #2FDF85;

  /* Selected cells - thick gray border and subtle everpine background */
  .ag-cell-range-selected:not(.ag-cell-range-single-cell) {
    filter: brightness(1.01);
  }

  /* Single cell selection */
  .ag-cell-range-single-cell {
    border: 1px dashed var(--bid-leveling-gray-500) !important;
    filter: brightness(1.02);
  }

  /* Cell range selection border (the outer border of selection) */
  .ag-cell-range-selected {
    &.ag-cell-range-top {
      border-top: 2px dashed var(--bid-leveling-gray-400) !important;
    }

    &.ag-cell-range-right {
      border-right: 2px dashed var(--bid-leveling-gray-400) !important;
    }

    &.ag-cell-range-bottom {
      border-bottom: 2px dashed var(--bid-leveling-gray-400) !important;
    }

    &.ag-cell-range-left {
      border-left: 2px dashed var(--bid-leveling-gray-400) !important;
    }
  }


  /* Row hover - subtle everpine background for entire row */
  /* .ag-row-hover {
    background-color: var(--bid-leveling-everpine-50) !important;
  } */

  /* Column hover highlight - zest background */
  .ag-cell.ag-column-hover:not(.ag-cell-range-selected):not(.ag-cell-range-single-cell) {
    background-color: var(--bid-leveling-zest-100) !important;
  }

  /* Hovered cell - dashed gray border, no background (override row hover bg) */
  .ag-cell:hover:not(.ag-cell-range-selected):not(.ag-cell-range-single-cell):not(.ag-cell-range-top):not(.ag-cell-range-right):not(.ag-cell-range-bottom):not(.ag-cell-range-left) {
    border: 2px dashed var(--bid-leveling-gray-400) !important;
  }

  /* Ensure focus state also has proper styling */
  .ag-cell-focus:not(.ag-cell-range-selected) {
    border: 2px solid var(--bid-leveling-gray-400) !important;
  }

  /* Remove default focus outline */
  .ag-cell:focus {
    outline: none !important;
  }

  .ag-cell-popup-editing {
    border: 2px solid var(--bid-leveling-fizz-900) !important;
  }
}

#costEstimateGrid {
  .ag-overlay {
    pointer-events: unset !important;
  }

  .ag-overlay-no-rows-wrapper {
    padding-top: 88px; /* 48px header + 40px group header */
    min-height: 256px; /* content (~168px) + padding (88px) */
  }

  .ag-cell-wrapper {
    height: 100%;
  }

  /* measuredValue header: allow overflow, move resize handle to far right */
  .ag-header-cell[col-id="measuredValue"] {
    overflow: visible !important;

    .ag-header-cell-resize {
      position: absolute !important;
      right: -60px !important;
    }

    .ag-cell-label-container {
      flex-direction: row !important;
    }

    .ag-header-cell-label {
      overflow: visible !important;
    }
  }

  /* measuredUnit header: show "UoM" label (was hidden) */
}

#historicalGrid {
  --historical-brand-everpine-700: #3E9D77;
  
  .ag-number-field-input {
    border-radius: 6px;
    font-size: 12px;
    padding-left: 24px;
    padding-top: 4px;
    padding-bottom: 4px;

    &:focus {
      --tw-ring-color: var(--historical-brand-everpine-700);
    }
  }

  .ag-filter-active {
    background-image: linear-gradient(var(--historical-brand-everpine-700)) !important;
    outline: solid 4px var(--historical-brand-everpine-700) !important;

    :where(.ag-icon-filter) {
      color: white !important;
    }
  }
}


/* Calculated ETA Table - Sticky Columns */
#etaTable thead th[data-column="external_id"] {
  position: sticky !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 30 !important;
  background-color: rgb(249 250 251) !important;
}

#etaTable tbody td[data-column="external_id"] {
  position: sticky !important;
  left: 0 !important;
  z-index: 25 !important;
  background-color: inherit !important;
}

#etaTable thead th[data-column="bill_number"] {
  position: sticky !important;
  left: 160px !important;
  top: 0 !important;
  z-index: 30 !important;
  background-color: rgb(249 250 251) !important;
}

#etaTable tbody td[data-column="bill_number"] {
  position: sticky !important;
  left: 160px !important;
  z-index: 25 !important;
  background-color: inherit !important;
}

/* Ensure tooltips show above sticky elements */
#etaTable tbody td[data-column="external_id"] [title] {
  position: relative;
  z-index: 100;
}

/*
 * Usage dashboard token-usage chart tooltip. Strips ag-charts' default
 * wrapper chrome (white background, border, padding, squared corners) so only
 * the custom dark card from UsageChart's renderer shows. ag-charts draws
 * the tooltip outside the React tree, so a stylesheet is the way to reach it.
 */
.token-usage-chart .ag-charts-tooltip {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
}
.token-usage-chart .ag-charts-tooltip-content,
.token-usage-chart .ag-charts-tooltip-title {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 12px;
}

/* Takeoff V2 - Scope row styling (grayish background like V1) */
/* AG Grid v33 applies ag-row-even/odd classes - need to override those */
.ag-row.ag-row-even.scope-row,
.ag-row.ag-row-odd.scope-row,
.ag-row.ag-row-even.system-row,
.ag-row.ag-row-odd.system-row,
.ag-row.ag-row-even.dimension-row,
.ag-row.ag-row-odd.dimension-row {
  background-color: #f3f4f6 !important;
  font-weight: 500 !important;
}

.ag-row.ag-row-even.scope-row .ag-cell,
.ag-row.ag-row-odd.scope-row .ag-cell,
.ag-row.ag-row-even.system-row .ag-cell,
.ag-row.ag-row-odd.system-row .ag-cell,
.ag-row.ag-row-even.dimension-row .ag-cell,
.ag-row.ag-row-odd.dimension-row .ag-cell {
  background-color: #f3f4f6 !important;
}

/* Also target when hovered */
.ag-row.ag-row-even.scope-row:hover,
.ag-row.ag-row-odd.scope-row:hover,
.ag-row.ag-row-even.system-row:hover,
.ag-row.ag-row-odd.system-row:hover,
.ag-row.ag-row-even.dimension-row:hover,
.ag-row.ag-row-odd.dimension-row:hover {
  background-color: #e5e7eb !important;
}

.ag-row.ag-row-even.scope-row:hover .ag-cell,
.ag-row.ag-row-odd.scope-row:hover .ag-cell,
.ag-row.ag-row-even.system-row:hover .ag-cell,
.ag-row.ag-row-odd.system-row:hover .ag-cell,
.ag-row.ag-row-even.dimension-row:hover .ag-cell,
.ag-row.ag-row-odd.dimension-row:hover .ag-cell {
  background-color: #e5e7eb !important;
}
.multiselect__container {
    font-family: sans-serif;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    padding-right: 1.75rem;
    padding-left: 0.5rem;
    background: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat right #ddd;
    background-color: transparent;
    border-radius: 0.25rem;
    appearance: none;
    border: 1px solid rgb(218 218 218);
    outline-offset: 2px;
    outline: transparent solid 2px;
    color: rgb(55 61 63);
    line-height: 1.5;
    font-style: normal;
    font-weight: 400;
    font-size: 0.875rem;
    cursor: pointer;
  }
  
  .multiselect__no-result {
    color: rgb(112 112 112);
    padding: 0.75rem;
    font-size: 0.875rem;
  }
  
  .multiselect__addable-button {
    padding: 0.5rem;
    text-decoration-line: underline;
    color: rgb(55 61 63);
    cursor: pointer;
  }
  
  .multiselect__addable-button:hover {
    color: rgb(29 115 186);
  }
  
  .multiselect__container:focus-within {
    border-color: rgb(44 141 222);
    --tw-shadow:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --tw-shadow-colored:  0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
  
  .multiselect__container--disabled {
    background-color: rgb(240 240 240);
    cursor: not-allowed;
  }
  
  .multiselect__container:hover {
    --tw-shadow:  0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --tw-shadow-colored:  0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
  
  .multiselect__hidden {
    display: none;
  }
  
  .multiselect__preview {
    width: -webkit-fill-available;
    width: -moz-available;
    width: -webkit-fill-available;
    gap: 0.5rem;
    font-size: 0.875rem;
    display: flex;
    flex-wrap: wrap;
  }
  
  .multiselect__pill {
    max-width: fill-available;
    color: rgb(55 61 63);
    font-size: 0.75rem;
    padding-left: 0.5rem;
    background-color: rgb(250 249 244);
    border: 1px solid #f0f0f0;
    border-radius: 0.25rem;
    display: flex;
  }
  
  .multiselect__pill-delete {
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    align-items: center;
    display: flex;
    margin-left: 0.25rem;
  }
  
  .multiselect__pill-delete:hover {
    background-color: rgb(254 178 178);
  }
  
  .multiselect__pill:hover svg{
    fill: rgb(246, 71, 71);
  }
  
  .multiselect__pill-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  
  .multiselect__input-container {
    display: flex;
  }
  
  .multiselect__focused {
    background-color: #f4fbff;
  }
  
  .multiselect__placeholder {
    color: rgb(174 174 174);
    font-style: italic;
    padding-left: 0.25rem;
    opacity: 1;
  }
  
  .multiselect__addable {
    text-decoration-line: underline;
    color: rgb(112 112 112);
    text-align: center;
  }
  
  .multiselect__addable:hover {
    color: rgb(55 61 63);
  }
  
  .multiselect__search {
    width: 100%;
    outline: 2px solid transparent;
    outline-offset: 2px;
    border: transparent;
    color: rgb(55 61 63);
    font-size: 0.875rem;
    padding-left: 0.25rem;
  }
  
  .multiselect__search:focus::placeholder {
    color: rgb(112 112 112);
  }
  
  .multiselect__search:disabled {
    background-color: rgb(240 240 240);
    cursor: not-allowed;
  }
  
  .multiselect__search::placeholder {
    font-style: italic;
    opacity: 1;
    color: rgb(174 174 174);
  }
  
  .multiselect__list {
    max-height: 400px;
    overflow-y: auto;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  .multiselect__list li {
    display: block;
    align-items: center;
    font-size: 0.875rem;
    color: rgb(112 112 112);
    border-top-width: 1;
  }
  
  
  .multiselect__list li:first {
    border-top-width: 0;
  }
  
  .multiselect__list li:hover {
    background-color: rgb(244 251 255);
  }
  
  .multiselect__list li label {
    padding: 0.75rem;
    align-items: center;
    cursor: pointer;
    display: flex;
  }
  
  .multiselect__list li:first-child {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
  }
  
  .multiselect__list li:last-child {
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
  }
  
  .multiselect__list li input {
    margin-right: 0.75rem;
  }
  
  .multiselect__dropdown {
    --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    background-color: rgb(255 255 255);
    border: 1px solid rgb(218 218 218);
    width: 100%;
    border-radius: 0.25rem;
    display: none;
    margin-top: 0.5rem;
    z-index: 50;
    position: absolute;
  }
  
  .multiselect__dropdown--open {
    display: block;
  }
/* offside-js 1.4.0 26-03-2018
* Minimal JavaScript kit without library dependencies to push things off-canvas using just class manipulation
* https://github.com/toomuchdesign/offside.git
*
* by Andrea Carraro
* Available under the MIT license
*/

/* Off-canvas element CSS */
.offside {
    position: fixed; /* Does not play well with some old browsers (see: README) */
    height: 100%;
    top: 0;
    z-index: 9999;
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */
}

/* Left off-canvas elements default status: out of the page */
.offside,
.offside--left {
    left: -200px;
}

/* Right off-canvas elements default status: out of the page */
.offside--right {
    left: auto;
    right: -200px;
}

/*
 * Left off-canvas element is open:
 * - off-canvas element slides in
 * - container elements slides out
 */
.offside--left.is-open,
.offside-js--is-left .offside-sliding-element {
    -webkit-transform: translate3d(200px, 0, 0);
    -moz-transform: translate3d(200px, 0, 0);
    -ms-transform: translate3d(200px, 0, 0);
    -o-transform: translate3d(200px, 0, 0);
    transform: translate3d(200px, 0, 0);
}

/*
 * Right off-canvas element is open:
 * - off-canvas element slides in
 * - container elements slides out
 */
.offside--right.is-open,
.offside-js--is-right .offside-sliding-element {
    -webkit-transform: translate3d(-200px, 0, 0);
    -moz-transform: translate3d(-200px, 0, 0);
    -ms-transform: translate3d(-200px, 0, 0);
    -o-transform: translate3d(-200px, 0, 0);
    transform: translate3d(-200px, 0, 0);
}

/* Elements Transitions */
.offside-js--interact .offside,
.offside-js--interact .offside-sliding-element {
    -webkit-transition: -webkit-transform .2s cubic-bezier(.16, .68, .43, .99);
    -moz-transition: -moz-transform .2s cubic-bezier(.16, .68, .43, .99);
    -o-transition: -o-transform .2s cubic-bezier(.16, .68, .43, .99);
    transition: transform .2s cubic-bezier(.16, .68, .43, .99);
    
    /* improves performance issues on mobile*/
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

/* Body overflow */
.offside-js--init {
    overflow-x: hidden;
}



/* Fallback movements for browser not supporting CSS 3d Transitions
----------------------------------------------- */

/* Modernizr false negative csstransforms3d fix, reset CSS 3d Transitions */
.no-csstransforms3d .offside {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.no-csstransforms3d .offside-sliding-element {
    overflow-x: hidden;
    position: relative;
}

/* Element is open: off-canvas element slides in */
.no-csstransforms3d .offside--left.is-open {
    left: 0;
}

.no-csstransforms3d .offside--right.is-open {
    right: 0;
}

/* Element is open: container elements slide out */
.no-csstransforms3d > .offside-js--is-left .offside-sliding-element {
    right: -200px;
}

.no-csstransforms3d > .offside-js--is-right .offside-sliding-element {
    left: -200px;
}
/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;

  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);

  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
  background-color: var(--xy-background-color, var(--xy-background-color-default));
  --xy-node-color-default: inherit;
  --xy-node-border-default: 1px solid #1a192b;
  --xy-node-background-color-default: #fff;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
  --xy-node-border-radius-default: 3px;

  --xy-handle-background-color-default: #1a192b;
  --xy-handle-border-color-default: #fff;

  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);

  --xy-controls-button-background-color-default: #fefefe;
  --xy-controls-button-background-color-hover-default: #f4f4f4;
  --xy-controls-button-color-default: inherit;
  --xy-controls-button-color-hover-default: inherit;
  --xy-controls-button-border-color-default: #eee;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #ffffff;
  --xy-edge-label-color-default: inherit;
  --xy-resize-background-color-default: #3367d9;
}
.react-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);

  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #777;
  --xy-background-pattern-lines-color-default: #777;
  --xy-background-pattern-cross-color-default: #777;
  --xy-node-color-default: #f8f8f8;
  --xy-node-border-default: 1px solid #3c3c3c;
  --xy-node-background-color-default: #1e1e1e;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;

  --xy-handle-background-color-default: #bebebe;
  --xy-handle-border-color-default: #1e1e1e;

  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);

  --xy-controls-button-background-color-default: #2b2b2b;
  --xy-controls-button-background-color-hover-default: #3e3e3e;
  --xy-controls-button-color-default: #f8f8f8;
  --xy-controls-button-color-hover-default: #fff;
  --xy-controls-button-border-color-default: #5b5b5b;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #141414;
  --xy-edge-label-color-default: #f8f8f8;
}
.react-flow__background {
  background-color: var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));
  pointer-events: none;
  z-index: -1;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
}
.react-flow__pane.draggable {
    cursor: grab;
  }
.react-flow__pane.dragging {
    cursor: grabbing;
  }
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow__edge-path {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}
.react-flow__connection-path {
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}
.react-flow .react-flow__edges {
  position: absolute;
}
.react-flow .react-flow__edges svg {
    overflow: visible;
    position: absolute;
    pointer-events: none;
  }
.react-flow__edge {
  pointer-events: visibleStroke;
}
.react-flow__edge.selectable {
    cursor: pointer;
  }
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge.selectable:focus .react-flow__edge-path,
  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
svg.react-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
}
.react-flow__node.selectable {
    cursor: pointer;
  }
.react-flow__node.draggable {
    cursor: grab;
    pointer-events: all;
  }
.react-flow__node.draggable.dragging {
      cursor: grabbing;
    }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
  border-radius: 100%;
}
.react-flow__handle.connectingfrom {
    pointer-events: all;
  }
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
.react-flow__handle-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.top.center, .react-flow__panel.bottom.center {
      left: 50%;
      transform: translateX(-15px) translateX(-50%);
    }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.left.center, .react-flow__panel.right.center {
      top: 50%;
      transform: translateY(-15px) translateY(-50%);
    }
.react-flow__attribution {
  font-size: 10px;
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: 0;
  top: 0;
}
.react-flow__viewport-portal {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__minimap {
  background: var(
    --xy-minimap-background-color-props,
    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
  );
}
.react-flow__minimap-svg {
    display: block;
  }
.react-flow__minimap-mask {
    fill: var(
      --xy-minimap-mask-background-color-props,
      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
    );
    stroke: var(
      --xy-minimap-mask-stroke-color-props,
      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-mask-stroke-width-props,
      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
    );
  }
.react-flow__minimap-node {
    fill: var(
      --xy-minimap-node-background-color-props,
      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
    );
    stroke: var(
      --xy-minimap-node-stroke-color-props,
      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-node-stroke-width-props,
      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
    );
  }
.react-flow__background-pattern.dots {
    fill: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
    );
  }
.react-flow__background-pattern.lines {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
    );
  }
.react-flow__background-pattern.cross {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
    );
  }
.react-flow__controls {
  display: flex;
  flex-direction: column;
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
}
.react-flow__controls.horizontal {
    flex-direction: row;
  }
.react-flow__controls-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    padding: 4px;
    border: none;
    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
    border-bottom: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
    color: var(
      --xy-controls-button-color-props,
      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
    );
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-input,
.react-flow__node-default,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
  width: 150px;
  font-size: 12px;
  color: var(--xy-node-color, var(--xy-node-color-default));
  text-align: center;
  border: var(--xy-node-border, var(--xy-node-border-default));
  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
}
.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
    }
.react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
    }
.react-flow__node-group {
  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls-button:hover {
      background: var(
        --xy-controls-button-background-color-hover-props,
        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
      );
      color: var(
        --xy-controls-button-color-hover-props,
        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
      );
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__controls-button:last-child {
    border-bottom: none;
  }
.react-flow__controls.horizontal .react-flow__controls-button {
    border-bottom: none;
    border-right: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
  }
.react-flow__controls.horizontal .react-flow__controls-button:last-child {
    border-right: none;
  }
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 4px;
  height: 4px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  transform: translate(-50%, -50%);
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
.react-flow__edge-textbg {
  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}
.react-flow__edge-text {
  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
}
#payables-bar-chart td + td { border-left:2px solid #fff; }
.tags-json{
  --tag-bg                  : #e5e7eb;
  --tag-hover               : #e5e7eb;
  --tag-text-color          : #1f2937;
  --tag-remove-bg           : rgb(227, 167, 167);
  --tag-border-radius       : 25px;
  --tag-text-color--edit    : #111;
  --tag-pad                 : .3em .9em;
  --tag-inset-shadow-size   : 1.35em;
  --tag-text-color--edit    : #000;
  padding: 3px 6px;
}

.tagify__input::before {
  color: #6b7280;
}

.tagify__tag__removeBtn:hover + div > span {
    opacity: 0.9;
}

.tags-json .tagify__tag{
  margin: 2px;
}

.tags-json .tagify__input{
  padding-left: 1px;
}

.tags-dropdown {
  font-size: 14px;
}
.themed-sidebar {
  background-color: var(--sidebar-bg);
  color: var(--sidebar-text);
  transition: background 0.2s, color 0.2s;
}

.themed-sidebar-link {
  transition: background 0.2s, color 0.2s;
}

.themed-sidebar-link:hover {
  background: var(--sidebar-link-hover-bg);
  color: var(--sidebar-link-hover-text);
}

.themed-header {
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: background 0.2s, color 0.2s;
}

.themed-header h1 {
  transition: color 0.2s;
}
/* Empty theme variables CSS file to prevent routing errors */
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */