/*
 * 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.4.0 as importmap */
@import url("https://code.highcharts.com/12.4.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);
  color: var(--body-color);
  font-size: var(--text-sm);
  text-decoration: none;
  font-weight: normal;
}

/* Plot line labels (event markers) */
.highcharts-plot-line-label {
  fill: var(--body-color);
  color: var(--body-color);
}

.highcharts-background {
  fill: none;
}

/* No xAxis line on Devices, Time heatmaps, and Category Entry Points chart */
.devices-component .highcharts-xaxis .highcharts-axis-line,
.time-heatmap-component .highcharts-xaxis .highcharts-axis-line,
.devices-component .highcharts-grid .highcharts-grid-line,
.time-heatmap-component .highcharts-grid .highcharts-grid-line,
.category-entry-points-chart .highcharts-grid .highcharts-grid-line,
.category-entry-points-chart .highcharts-xaxis .highcharts-axis-line,
.addressable-audience-component .highcharts-axis-line,
.target-performance-component .highcharts-axis-line,
.ad-formats-performance-component .highcharts-axis-line,
.creative-performance-component .highcharts-axis-line,
.touchpoint-performance-component .highcharts-axis-line,
.reach-cell .highcharts-axis-line,
.reach-cell .highcharts-grid .highcharts-grid-line,
.highcharts-arearange-series .highcharts-graph {
  stroke: 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-breadcrumbs-group .highcharts-button:last-child {
  fill: none;
}

.highcharts-breadcrumbs-group .highcharts-button:last-child text {
  font-weight: normal;
  fill: var(--body-color);
}

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

.highcharts-parentNode {
  opacity: 0.2;
}

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

.addressable-audience-component .highcharts-series-inactive {
  opacity: 1;
}

/* Immediate Response - colored markers for engagement points */
.engagement-point-positive .highcharts-point {
  fill: #10b981;
  stroke: #10b981;
}

.engagement-point-negative .highcharts-point {
  fill: #ef4444;
  stroke: #ef4444;
}

/* Immediate Response - tooltip styling */
.chart-tooltip-header {
  margin-bottom: 8px;
  font-weight: 500;
}

.chart-tooltip-item {
  display: block;
  line-height: 1.6;
  padding: 4px 0;
}

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 palette — 42 muted military scheme (issue #1833). Charts read these vars (styled
   mode); defined after the CDN @import so they win. Same hex on light and dark — one set of
   selectors covers :root and both Highcharts theme scopes so charts follow either theme. */
:root,
.highcharts-light,
.dark,
.dark .highcharts-light,
.highcharts-dark {
  --highcharts-color-0: #b1626f;
  --highcharts-color-1: #d1896f;
  --highcharts-color-2: #b69a5e;
  --highcharts-color-3: #708348;
  --highcharts-color-4: #60a783;
  --highcharts-color-5: #008d90;
  --highcharts-color-6: #58a7cd;
  --highcharts-color-7: #6779b1;
  --highcharts-color-8: #b381b2;
  --highcharts-color-9: #8f9a92;
}

/* Per-point shade classes: each hue's base + 4 lighter tints (100-194). Used by the delivery
   component gantt. Palette is mode-agnostic, so these apply in light and dark alike. */
/* Color 0: #B1626F — Brick */
.highcharts-color-100 {
  fill: #b1626f;
  stroke: #b1626f;
}
.highcharts-color-101 {
  fill: #c8919a;
  stroke: #c8919a;
}
.highcharts-color-102 {
  fill: #dcb8be;
  stroke: #dcb8be;
}
.highcharts-color-103 {
  fill: #ecd8db;
  stroke: #ecd8db;
}
.highcharts-color-104 {
  fill: #f6ecee;
  stroke: #f6ecee;
}
/* Color 1: #D1896F — Rust */
.highcharts-color-110 {
  fill: #d1896f;
  stroke: #d1896f;
}
.highcharts-color-111 {
  fill: #dfac9a;
  stroke: #dfac9a;
}
.highcharts-color-112 {
  fill: #eacabe;
  stroke: #eacabe;
}
.highcharts-color-113 {
  fill: #f4e2db;
  stroke: #f4e2db;
}
.highcharts-color-114 {
  fill: #f9f1ee;
  stroke: #f9f1ee;
}
/* Color 2: #B69A5E — Mustard */
.highcharts-color-120 {
  fill: #b69a5e;
  stroke: #b69a5e;
}
.highcharts-color-121 {
  fill: #ccb88e;
  stroke: #ccb88e;
}
.highcharts-color-122 {
  fill: #ded2b7;
  stroke: #ded2b7;
}
.highcharts-color-123 {
  fill: #ede6d7;
  stroke: #ede6d7;
}
.highcharts-color-124 {
  fill: #f6f3ec;
  stroke: #f6f3ec;
}
/* Color 3: #708348 — Olive */
.highcharts-color-130 {
  fill: #708348;
  stroke: #708348;
}
.highcharts-color-131 {
  fill: #9ba87f;
  stroke: #9ba87f;
}
.highcharts-color-132 {
  fill: #bfc7ad;
  stroke: #bfc7ad;
}
.highcharts-color-133 {
  fill: #dbe0d1;
  stroke: #dbe0d1;
}
.highcharts-color-134 {
  fill: #eef0e9;
  stroke: #eef0e9;
}
/* Color 4: #60A783 — Field */
.highcharts-color-140 {
  fill: #60a783;
  stroke: #60a783;
}
.highcharts-color-141 {
  fill: #90c1a8;
  stroke: #90c1a8;
}
.highcharts-color-142 {
  fill: #b7d7c7;
  stroke: #b7d7c7;
}
.highcharts-color-143 {
  fill: #d7e9e0;
  stroke: #d7e9e0;
}
.highcharts-color-144 {
  fill: #ecf4f0;
  stroke: #ecf4f0;
}
/* Color 5: #008D90 — Petrol */
.highcharts-color-150 {
  fill: #008d90;
  stroke: #008d90;
}
.highcharts-color-151 {
  fill: #4dafb1;
  stroke: #4dafb1;
}
.highcharts-color-152 {
  fill: #8ccccd;
  stroke: #8ccccd;
}
.highcharts-color-153 {
  fill: #bfe3e3;
  stroke: #bfe3e3;
}
.highcharts-color-154 {
  fill: #e0f1f2;
  stroke: #e0f1f2;
}
/* Color 6: #58A7CD — Steel */
.highcharts-color-160 {
  fill: #58a7cd;
  stroke: #58a7cd;
}
.highcharts-color-161 {
  fill: #8ac1dc;
  stroke: #8ac1dc;
}
.highcharts-color-162 {
  fill: #b4d7e9;
  stroke: #b4d7e9;
}
.highcharts-color-163 {
  fill: #d5e9f3;
  stroke: #d5e9f3;
}
.highcharts-color-164 {
  fill: #ebf4f9;
  stroke: #ebf4f9;
}
/* Color 7: #6779B1 — Indigo */
.highcharts-color-170 {
  fill: #6779b1;
  stroke: #6779b1;
}
.highcharts-color-171 {
  fill: #95a1c8;
  stroke: #95a1c8;
}
.highcharts-color-172 {
  fill: #bbc3dc;
  stroke: #bbc3dc;
}
.highcharts-color-173 {
  fill: #d9deec;
  stroke: #d9deec;
}
.highcharts-color-174 {
  fill: #edeff6;
  stroke: #edeff6;
}
/* Color 8: #B381B2 — Plum */
.highcharts-color-180 {
  fill: #b381b2;
  stroke: #b381b2;
}
.highcharts-color-181 {
  fill: #caa7c9;
  stroke: #caa7c9;
}
.highcharts-color-182 {
  fill: #ddc6dc;
  stroke: #ddc6dc;
}
.highcharts-color-183 {
  fill: #ece0ec;
  stroke: #ece0ec;
}
.highcharts-color-184 {
  fill: #f6f0f6;
  stroke: #f6f0f6;
}
/* Color 9: #8F9A92 — Stone */
.highcharts-color-190 {
  fill: #8f9a92;
  stroke: #8f9a92;
}
.highcharts-color-191 {
  fill: #b1b8b3;
  stroke: #b1b8b3;
}
.highcharts-color-192 {
  fill: #cdd2ce;
  stroke: #cdd2ce;
}
.highcharts-color-193 {
  fill: #e3e6e4;
  stroke: #e3e6e4;
}
.highcharts-color-194 {
  fill: #f2f3f2;
  stroke: #f2f3f2;
}

[data-title]:not(input):not(textarea):not(select) {
  position: relative;
  cursor: help;
}

[data-title]:hover::after {
  content: attr(data-title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 5px;

  /* Styling */
  background: var(--color-surface-default);
  color: var(--color-text-default);
  padding: 8px 12px;
  border-radius: 3px;
  border: 1px solid var(--color-border-default);
  white-space: pre-line;
  max-width: 400px;
  width: max-content;
  text-align: left;
  font-size: var(--text-sm);
  line-height: 1.5;
  z-index: 1000;
  pointer-events: none;

  /* Animation */
  animation: tooltipFadeIn 0.4s ease-in;
}

/* Position tooltips below for table headers to avoid clipping */
th[data-title]:hover::after {
  bottom: auto;
  top: 100%;
  margin-bottom: 0;
  margin-top: 5px;
}

/* Tooltip alignment options for table headers */
th[data-title][data-title-align="right"]:hover::after {
  left: auto;
  right: 0;
  transform: translateX(0);
}

th[data-title][data-title-align="left"]:hover::after {
  left: 0;
  right: auto;
  transform: translateX(0);
}

/* Tooltip alignment options for all elements */
[data-title][data-title-align="right"]:hover::after {
  left: auto;
  right: 0;
  transform: translateX(0);
}

[data-title][data-title-align="left"]:hover::after {
  left: 0;
  right: auto;
  transform: translateX(0);
}

/* Tooltip position bottom option */
[data-title][data-title-position="bottom"]:hover::after {
  bottom: auto !important;
  top: 100% !important;
  margin-bottom: 0 !important;
  margin-top: 5px !important;
}

@keyframes tooltipFadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Download data table styles */
.download-data-table {
  border-collapse: collapse;
}

.download-data-table thead {
  background-color: var(--color-surface-muted);
  color: var(--color-text-default);
}

.download-data-table thead th {
  color: var(--color-text-default);
  font-weight: 600;
}

.download-data-table tbody tr {
  border-bottom: 1px solid var(--color-border-default);
}

.download-data-table tbody tr:hover {
  background-color: var(--color-surface-muted);
}

.download-data-table tbody td {
  color: var(--color-text-default);
}

.download-data-table .text-muted {
  color: var(--color-text-muted);
}

/* Brand Activity - data labels with text outline for better readability */
.brand-activity-component .highcharts-data-label text {
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.8),
    1px -1px 0 rgba(255, 255, 255, 0.8),
    -1px 1px 0 rgba(255, 255, 255, 0.8),
    1px 1px 0 rgba(255, 255, 255, 0.8),
    -2px 0 0 rgba(255, 255, 255, 0.8),
    2px 0 0 rgba(255, 255, 255, 0.8),
    0 -2px 0 rgba(255, 255, 255, 0.8),
    0 2px 0 rgba(255, 255, 255, 0.8);
}

.dark .brand-activity-component .highcharts-data-label text {
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.8),
    1px -1px 0 rgba(0, 0, 0, 0.8),
    -1px 1px 0 rgba(0, 0, 0, 0.8),
    1px 1px 0 rgba(0, 0, 0, 0.8),
    -2px 0 0 rgba(0, 0, 0, 0.8),
    2px 0 0 rgba(0, 0, 0, 0.8),
    0 -2px 0 rgba(0, 0, 0, 0.8),
    0 2px 0 rgba(0, 0, 0, 0.8);
}

.iti__search-input:focus-visible {
  outline: 2px solid var(--color-focus-outline);
}

.iti__dropdown-content {
  max-width: 360px;
}