/**
 * @file
 * Styles for the engage_chart_download module.
 *
 * Repositions the ApexCharts toolbar to top-left, makes it always visible,
 * and styles the custom export button as a primary action.
 */

/* Move toolbar to top-left and always show. */
.apexcharts-toolbar {
  right: auto !important;
  left: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Override hover-only visibility on desktop. */
@media screen and (min-width: 768px) {
  .apexcharts-canvas .apexcharts-toolbar {
    opacity: 1 !important;
  }
}

/* Custom export button. */
.engage-chart-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background-color: #0d6efd;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.2s;
}

.engage-chart-export-btn:hover {
  background-color: #0b5ed7;
}

.engage-chart-export-btn:active {
  background-color: #0a58ca;
}

.engage-chart-export-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Align the dropdown menu to left to match the button position. */
.apexcharts-menu {
  right: auto !important;
  left: 0 !important;
}

/* Darken menu item text for readability. */
.apexcharts-menu-item {
  color: #212529 !important;
  font-weight: 500;
}