/*
 * 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.
 *

 */

/* Highcharts light / dark mode support v12.3.0 as importmap */
@import url("https://code.highcharts.com/12.3.0/css/highcharts.css");

.highcharts-container,
.highcharts-root {
  font-family: var(--font-sans);
  color: var(--body-color);
}

.highcharts-root .highcharts-title {
  font-weight: normal;
}

.highcharts-axis-labels,
.highcharts-axis-title,
.chart-tooltip,
.highcharts-data-label text,
.highcharts-drilldown-data-label text,
.highcharts-legend-item > text,
.highcharts-legend-item span {
  fill: var(--body-color);
  font-size: var(--text-sm);
  text-decoration: none;
  font-weight: normal;
}

.highcharts-background {
  fill: none;
}

/* Restore behavior so we can override the text color in StyledMode if needed ( axis title, etc...) */
.highcharts-color-0 text.highcharts-axis-title {
  fill: var(--highcharts-color-0);
}

.highcharts-color-1 text.highcharts-axis-title {
  fill: var(--highcharts-color-1);
}

.highcharts-color-2 text.highcharts-axis-title {
  fill: var(--highcharts-color-2);
}

.highcharts-color-3 text.highcharts-axis-title {
  fill: var(--highcharts-color-3);
}

.highcharts-color-4 text.highcharts-axis-title {
  fill: var(--highcharts-color-4);
}

.highcharts-color-5 text.highcharts-axis-title {
  fill: var(--highcharts-color-5);
}

.highcharts-color-6 text.highcharts-axis-title {
  fill: var(--highcharts-color-6);
}

.highcharts-color-7 text.highcharts-axis-title {
  fill: var(--highcharts-color-7);
}

.highcharts-color-8 text.highcharts-axis-title {
  fill: var(--highcharts-color-8);
}

.highcharts-color-9 text.highcharts-axis-title {
  fill: var(--highcharts-color-9);
}

.highcharts-tooltip-box {
  stroke-width: 1;
  stroke: var(--color-border-default);
}

.highcharts-button {
  fill: var(--btn-primary-bg);
  stroke: none;
}

.highcharts-button text {
  fill: var(--btn-primary-text);
}

.highcharts-mapbubble-series .highcharts-point,
.highcharts-bubble-series .highcharts-point {
  stroke-width: 0;
}
.highcharts-mapbubble-series .highcharts-point-hover,
.highcharts-bubble-series .highcharts-point-hover {
  stroke-width: 1;
}

.highcharts-area-series .highcharts-graph {
  stroke-width: 0;
}

/* Custom color for the gray forced at data point level  */
.highcharts-color-999 {
  fill: rgb(229, 231, 235);
  stroke: rgb(229, 231, 235);
}

.highcharts-data-label-connector.highcharts-color-999 {
  fill: none;
}

/* Linear budget series styling */
.highcharts-series.linear-budget-series .highcharts-graph {
  stroke: #cccccc;
  stroke-width: 1px;
  stroke-dasharray: 3, 3; /* Creates dotted line effect */
}

/* Linear budget series legend styling */
.highcharts-legend-item.linear-budget-series .highcharts-graph {
  stroke: #cccccc;
  stroke-width: 1px;
  stroke-dasharray: 3, 3; /* Creates dotted line effect in legend */
}

.location-map-component .highcharts-series-inactive {
  opacity: 0.8;
}

trix-toolbar .trix-button {
  border-bottom: none !important;
}

/* style active buttons */
trix-toolbar .trix-button.trix-active {
  background-color: var(--color-action-bg) !important;
}

/* style toolbar */
trix-toolbar .trix-button-group {
  border: 1px solid var(--color-border-default) !important; /* ring-gray-300 */
  border-radius: 0.375rem !important; /* rounded-md */
}

.dark {
  trix-toolbar .trix-button::before {
    filter: invert();
  }

  trix-editor {
    color: white;
  }

  trix-toolbar .trix-button:disabled {
    filter: invert() grayscale(1) brightness(2);
  }
  trix-toolbar .trix-button--icon::before {
    opacity: 1;
  }
  trix-toolbar .trix-button--icon:disabled::before {
    opacity: 0.5;
  }
}

/* Highcharts color classes for hierarchical coloring */
/* Format: .highcharts-color-XYZ where X is the color index (0-9), Y is always the color index, Z is the shade (0-4) */
/* Base colors (light mode) from Highcharts default palette */

/* Color 0: #2caffe (blue) - 100-104 */
.highcharts-color-100 {
  fill: #2caffe;
  stroke: #2caffe;
}
.highcharts-color-101 {
  fill: #6ec4fe;
  stroke: #6ec4fe;
}
.highcharts-color-102 {
  fill: #9dd6fe;
  stroke: #9dd6fe;
}
.highcharts-color-103 {
  fill: #c5e7ff;
  stroke: #c5e7ff;
}
.highcharts-color-104 {
  fill: #e5f5ff;
  stroke: #e5f5ff;
}

/* Color 1: #544fc5 (purple) - 110-114 */
.highcharts-color-110 {
  fill: #544fc5;
  stroke: #544fc5;
}
.highcharts-color-111 {
  fill: #8179d9;
  stroke: #8179d9;
}
.highcharts-color-112 {
  fill: #a69fe6;
  stroke: #a69fe6;
}
.highcharts-color-113 {
  fill: #c7c3f0;
  stroke: #c7c3f0;
}
.highcharts-color-114 {
  fill: #e3e1f8;
  stroke: #e3e1f8;
}

/* Color 2: #00e272 (green) - 120-124 */
.highcharts-color-120 {
  fill: #00e272;
  stroke: #00e272;
}
.highcharts-color-121 {
  fill: #4deb98;
  stroke: #4deb98;
}
.highcharts-color-122 {
  fill: #80f0b3;
  stroke: #80f0b3;
}
.highcharts-color-123 {
  fill: #b3f5d1;
  stroke: #b3f5d1;
}
.highcharts-color-124 {
  fill: #d9fae8;
  stroke: #d9fae8;
}

/* Color 3: #fe6a35 (orange) - 130-134 */
.highcharts-color-130 {
  fill: #fe6a35;
  stroke: #fe6a35;
}
.highcharts-color-131 {
  fill: #fe9168;
  stroke: #fe9168;
}
.highcharts-color-132 {
  fill: #feb091;
  stroke: #feb091;
}
.highcharts-color-133 {
  fill: #fecfba;
  stroke: #fecfba;
}
.highcharts-color-134 {
  fill: #ffe7dc;
  stroke: #ffe7dc;
}

/* Color 4: #6b8abc (blue-gray) - 140-144 */
.highcharts-color-140 {
  fill: #6b8abc;
  stroke: #6b8abc;
}
.highcharts-color-141 {
  fill: #93a7ce;
  stroke: #93a7ce;
}
.highcharts-color-142 {
  fill: #b3c1dc;
  stroke: #b3c1dc;
}
.highcharts-color-143 {
  fill: #d1daea;
  stroke: #d1daea;
}
.highcharts-color-144 {
  fill: #e8edf5;
  stroke: #e8edf5;
}

/* Color 5: #d568fb (magenta) - 150-154 */
.highcharts-color-150 {
  fill: #d568fb;
  stroke: #d568fb;
}
.highcharts-color-151 {
  fill: #e192fc;
  stroke: #e192fc;
}
.highcharts-color-152 {
  fill: #eab4fd;
  stroke: #eab4fd;
}
.highcharts-color-153 {
  fill: #f2d5fe;
  stroke: #f2d5fe;
}
.highcharts-color-154 {
  fill: #f8eaff;
  stroke: #f8eaff;
}

/* Color 6: #2ee0ca (cyan) - 160-164 */
.highcharts-color-160 {
  fill: #2ee0ca;
  stroke: #2ee0ca;
}
.highcharts-color-161 {
  fill: #69e9d8;
  stroke: #69e9d8;
}
.highcharts-color-162 {
  fill: #95efe3;
  stroke: #95efe3;
}
.highcharts-color-163 {
  fill: #bef5ee;
  stroke: #bef5ee;
}
.highcharts-color-164 {
  fill: #e0faf7;
  stroke: #e0faf7;
}

/* Color 7: #fa4b42 (red) - 170-174 */
.highcharts-color-170 {
  fill: #fa4b42;
  stroke: #fa4b42;
}
.highcharts-color-171 {
  fill: #fb7971;
  stroke: #fb7971;
}
.highcharts-color-172 {
  fill: #fc9e98;
  stroke: #fc9e98;
}
.highcharts-color-173 {
  fill: #fdc2be;
  stroke: #fdc2be;
}
.highcharts-color-174 {
  fill: #fee5e3;
  stroke: #fee5e3;
}

/* Color 8: #feb56a (yellow-orange) - 180-184 */
.highcharts-color-180 {
  fill: #feb56a;
  stroke: #feb56a;
}
.highcharts-color-181 {
  fill: #feca92;
  stroke: #feca92;
}
.highcharts-color-182 {
  fill: #fedbb1;
  stroke: #fedbb1;
}
.highcharts-color-183 {
  fill: #feecd0;
  stroke: #feecd0;
}
.highcharts-color-184 {
  fill: #fff6e8;
  stroke: #fff6e8;
}

/* Color 9: #91e8e1 (light cyan) - 190-194 */
.highcharts-color-190 {
  fill: #91e8e1;
  stroke: #91e8e1;
}
.highcharts-color-191 {
  fill: #b0eeea;
  stroke: #b0eeea;
}
.highcharts-color-192 {
  fill: #c8f2ef;
  stroke: #c8f2ef;
}
.highcharts-color-193 {
  fill: #dff7f5;
  stroke: #dff7f5;
}
.highcharts-color-194 {
  fill: #f0fbfa;
  stroke: #f0fbfa;
}

/* Dark mode color overrides */
.dark {
  /* Color 1 dark: #00e272 (green in dark mode) - 110-114 */
  .highcharts-color-110 {
    fill: #00e272;
    stroke: #00e272;
  }
  .highcharts-color-111 {
    fill: #4deb98;
    stroke: #4deb98;
  }
  .highcharts-color-112 {
    fill: #80f0b3;
    stroke: #80f0b3;
  }
  .highcharts-color-113 {
    fill: #b3f5d1;
    stroke: #b3f5d1;
  }
  .highcharts-color-114 {
    fill: #d9fae8;
    stroke: #d9fae8;
  }

  /* Color 2 dark: #efdf00 (yellow in dark mode) - 120-124 */
  .highcharts-color-120 {
    fill: #efdf00;
    stroke: #efdf00;
  }
  .highcharts-color-121 {
    fill: #f3e84d;
    stroke: #f3e84d;
  }
  .highcharts-color-122 {
    fill: #f6ed80;
    stroke: #f6ed80;
  }
  .highcharts-color-123 {
    fill: #f9f3b3;
    stroke: #f9f3b3;
  }
  .highcharts-color-124 {
    fill: #fcf9d9;
    stroke: #fcf9d9;
  }
}