/* Allow dropdowns inside cards to overflow (used by selectInput etc.) */
.unclipped-card {
  overflow: visible !important;
}
.unclipped-card .card-body {
  overflow: visible !important;
}

/* Disabled buttons: show not-allowed cursor instantly on hover.
   The wrapper div catches pointer events (the button itself blocks them when
   disabled), so cursor: not-allowed is set on the wrapper and pointer-events
   on the button are set to none so the cursor bleeds through from the wrapper. */
.d-grid:has(> .btn:disabled),
.d-grid:has(> .btn[disabled]) {
  cursor: not-allowed;
}
.btn:disabled,
.btn[disabled] {
  pointer-events: none;
}

/* Horizontal scroll for reactable tables on small screens */
.reactable {
  overflow-x: auto;
}

/* Disable clicking on air-datepicker nav title to prevent view switching */
/* This prevents users from clicking on the month name to go to year/decade view */
.air-datepicker-nav--title {
  pointer-events: none !important;
  cursor: default !important;
}

/* Also hide the "clickable" visual indicator */
.air-datepicker-nav--title:hover {
  background: transparent !important;
}

.card-header {
  font-size: 1.1em !important;
  /* height: 2.2em !important; */
}

/* Important that time picking works in daterangepicker! */
.daterangepicker {
  z-index: 1060 !important;
}
.daterangepicker .calendar-table {
  pointer-events: auto;
}
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
  pointer-events: auto !important;
}

/* Custom styles for the daterangepicker input in the SU management module */
div.bslib-grid:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
  width: 100% !important;
}

/* Note: Year removal from daterangepicker month headers is handled by custom.js */

/* General custom styles for the daterangepicker input to make it look like other shiny inputs*/
.custom-daterangepicker-input {
  border-radius: 4px !important;
  border: 0.8px solid rgba(70, 70, 70, 1) !important;
  padding: 6px 12px !important;
  height: calc(1.5em + 0.75rem + 2px) !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}
.custom-daterangepicker-input:focus {
  border: 0.8px solid rgba(70, 70, 70, 1) !important;
  box-shadow: 0 0 0 0.3rem #BFDEF0 !important;
  outline: none !important;
}

/* select2 dropdown must appear above Bootstrap modal backdrop (z-index 1050) */
.modal .select2-container {
  z-index: 1060 !important;
}
.select2-dropdown {
  z-index: 1061 !important;
}

/* =============================================================================
   GT Table Theme
   Phase 0.1: Global gt table styling aligned with bslib theme
   ============================================================================= */

/* Base table styling */
.gt_table {
  font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  font-size: var(--bs-body-font-size, 1rem);
  color: var(--bs-body-color, #212529);
  border-color: var(--bs-border-color, #dee2e6);
}

/* Column headers */
.gt_col_heading {
  background-color: var(--bs-tertiary-bg, #f8f9fa);
  color: var(--bs-body-color, #212529);
  font-weight: 600;
  border-bottom: 2px solid var(--bs-border-color, #dee2e6);
  padding: 0.5rem 0.75rem;
}

/* Spanner headers (grouped column headers) */
.gt_columns_top_border {
  border-top: 2px solid var(--bs-border-color, #dee2e6);
}

/* Table body rows */
.gt_row {
  border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
  padding: 0.5rem 0.75rem;
}

/* Alternating row colors (striped) */
.gt_striped {
  background-color: var(--bs-tertiary-bg, #f8f9fa);
}

/* Row hover effect */
.gt_table tbody tr:hover {
  background-color: var(--bs-secondary-bg, #e9ecef);
}

/* Group row headers */
.gt_group_heading {
  background-color: var(--bs-secondary-bg, #e9ecef);
  color: var(--bs-body-color, #212529);
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-top: 2px solid var(--bs-border-color, #dee2e6);
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

/* Stub column (row names) */
.gt_stub {
  background-color: var(--bs-tertiary-bg, #f8f9fa);
  font-weight: 500;
  border-right: 1px solid var(--bs-border-color, #dee2e6);
}

/* Table header (title and subtitle) */
.gt_title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bs-body-color, #212529);
  padding: 0.75rem;
}

.gt_subtitle {
  font-size: 0.875rem;
  color: var(--bs-secondary-color, #6c757d);
  padding: 0 0.75rem 0.75rem;
}

/* Footer notes */
.gt_footnote {
  font-size: 0.875rem;
  color: var(--bs-secondary-color, #6c757d);
  padding: 0.5rem 0.75rem;
}

/* Source notes */
.gt_sourcenote {
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
  padding: 0.5rem 0.75rem;
}

/* Summary rows */
.gt_summary_row {
  background-color: var(--bs-tertiary-bg, #f8f9fa);
  font-weight: 500;
  border-top: 2px solid var(--bs-border-color, #dee2e6);
}

/* Grand summary row */
.gt_grand_summary_row {
  background-color: var(--bs-secondary-bg, #e9ecef);
  font-weight: 600;
  border-top: 2px solid var(--bs-border-color, #dee2e6);
}

/* =============================================================================
   More-info accordion: heading scale + background
   ============================================================================= */

/* Scale down Markdown headings inside help-text accordions so they don't
   overpower the rest of the UI. Markdown files can keep their # / ## / ###
   structure unchanged — the scaling is applied centrally here. */
.more-info-md h1 { font-size: 1.1rem;  font-weight: 600; }
.more-info-md h2 { font-size: 1.05rem; font-weight: 600; }
.more-info-md h3 { font-size: 1rem;    font-weight: 600; }
.more-info-md h4,
.more-info-md h5,
.more-info-md h6 { font-size: 0.95rem; font-weight: 600; }

/* Subtle grey background to visually separate help accordions from card content */
.more-info-accordion .accordion-item {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color-translucent);
}
.more-info-accordion .accordion-button {
  background-color: var(--bs-tertiary-bg);
  font-size: 0.9rem;
  /* Move collapse arrow to the left */
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.5rem;
}
/* Arrow points right (collapsed) → down (open); reverse because of row-reverse */
.more-info-accordion .accordion-button::after {
  margin-left: 0;
  flex-shrink: 0;
}
.more-info-accordion .accordion-button:not(.collapsed) {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  box-shadow: none;
}
.more-info-accordion .accordion-body {
  background-color: var(--bs-tertiary-bg);
}

/* =============================================================================
   Help file interaction styles (for helpfile_helpers.js)
   ============================================================================= */

/* Table of contents block inside help Markdown files */
.toc {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 4px;
  padding: 15px 20px;
  margin-bottom: 20px;
}
.toc a {
  text-decoration: none;
  color: var(--bs-link-color);
}
.toc a:hover {
  text-decoration: underline;
}

/* Figure layout inside help Markdown files */
figure {
  display: inline-block;
  padding: 10px;
  border-radius: 4px;
  vertical-align: top;
}
figure img {
  display: block;
  max-width: 100%;
}
figure figcaption {
  max-width: 800px;
}

/* Highlight animation for figures and headings (background-color pulse) */
.figure-highlight,
.heading-highlight {
  animation: highlight-pulse 1.5s ease-in-out;
}
@keyframes highlight-pulse {
  0%   { background-color: transparent; }
  25%  { background-color: rgba(255, 220, 100, 0.6); }
  75%  { background-color: rgba(255, 220, 100, 0.6); }
  100% { background-color: transparent; }
}

/* Highlight animation for arbitrary elements (box-shadow pulse) */
.element-highlight {
  animation: element-highlight-pulse 1.5s ease-in-out !important;
  box-shadow: 0 0 15px 5px rgba(255, 193, 7, 0.7) !important;
}
@keyframes element-highlight-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
  25%  { box-shadow: 0 0 15px 5px rgba(255, 193, 7, 0.7); }
  75%  { box-shadow: 0 0 15px 5px rgba(255, 193, 7, 0.7); }
  100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}