/* (optional but recommended) define the tokens once somewhere global */
:root{
  --surface-2: #F8FAFC;
  --text-2: #475569;
  --border-subtle: #E2E8F0;
  --navy-900: #06233E;

  /* ✅ match your Dash HEADER_STYLE */
  --card-header-fs: 1.1rem;
  --card-header-lh: 1.2;
  --card-header-fw: 600;
}

/* Your card headers (Packs / Pack details) */
.card-header.custom-card-header{
  background-color: var(--surface-2) !important;
  color: var(--text-2) !important;

  border-bottom: 1px solid var(--border-subtle) !important;

  /* ✅ header typography lives here */
  font-weight: var(--card-header-fw);
  font-size: var(--card-header-fs);
  line-height: var(--card-header-lh);
}

/* If you ever use a strong/brand header */
.card-header.custom-card-header--brand{
  background-color: var(--navy-900) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,0.14) !important;
}

/* ✅ Keep header typography inheriting nicely (fixes <h5> defaults) */
.card-header.custom-card-header :is(h1,h2,h3,h4,h5,h6){
  color: inherit;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}



/* AG Grid: calm header + clearer hierarchy */
.custom-ag-grid.ag-theme-alpine{
  --ag-header-background-color: var(--surface-2, #F8FAFC);
  --ag-header-foreground-color: var(--text-2, #475569);

  --ag-border-color: var(--border-subtle, #E2E8F0);
  --ag-secondary-border-color: var(--border-subtle, #E2E8F0);

  --ag-row-hover-color: var(--primary-50, #F2F7FF);
  --ag-selected-row-background-color: var(--primary-100, #E8F1FF);
}

/* Header label text (stop it looking like a link) */
.custom-ag-grid .ag-header-cell-text{
  color: var(--text-2, #475569) !important;
  font-weight: 600;
}

/* Header icons (menu/sort) default neutral */
.custom-ag-grid .ag-icon{
  color: var(--text-3, #607080) !important;
}

/* Only *actively sorted* columns get the primary blue */
.custom-ag-grid .ag-header-cell.ag-header-cell-sorted-asc .ag-header-cell-text,
.custom-ag-grid .ag-header-cell.ag-header-cell-sorted-desc .ag-header-cell-text{
  color: var(--primary-600, #0A58CA) !important;
}

.custom-ag-grid .ag-header-cell.ag-header-cell-sorted-asc .ag-icon,
.custom-ag-grid .ag-header-cell.ag-header-cell-sorted-desc .ag-icon{
  color: var(--primary-600, #0A58CA) !important;
}

/* Default: burger/menu icons should NOT be primary blue */
.custom-ag-grid .ag-header-cell-menu-button .ag-icon,
.custom-ag-grid .ag-header-cell-menu-button .ag-icon-menu {
  color: var(--text-3, #607080) !important;
  opacity: 0.9;
}

/* On hover/focus: slightly stronger neutral (still not primary) */
.custom-ag-grid .ag-header-cell:hover .ag-header-cell-menu-button .ag-icon,
.custom-ag-grid .ag-header-cell:focus-within .ag-header-cell-menu-button .ag-icon {
  color: var(--text-2, #475569) !important;
  opacity: 1;
}

/* When the menu is open / active: OK to use primary */
.custom-ag-grid .ag-header-cell-menu-button.ag-header-cell-menu-button-open .ag-icon,
.custom-ag-grid .ag-header-cell.ag-header-cell-menu-open .ag-header-cell-menu-button .ag-icon {
  color: var(--primary-600, #0A58CA) !important;
}

.custom-ag-grid.ag-theme-alpine{
  --ag-header-icon-color: var(--text-3, #607080);
  --ag-icon-color: var(--text-3, #607080);
}

.custom-ag-grid .ag-side-button-button .ag-icon{
  color: var(--text-3, #607080) !important;
}

.custom-ag-grid .ag-side-button-button.ag-selected .ag-icon{
  color: var(--primary-600, #0A58CA) !important;
}

/* Neutral default header icons (sort, filter, burger) */
.ag-theme-alpine .ag-icon {
  color: var(--text-3, #607080) !important;
}

/* Burger / menu icon default = grey */
.ag-theme-alpine .ag-header-cell-menu-button .ag-icon,
.ag-theme-alpine .ag-header-cell-menu-button .ag-icon-menu {
  color: var(--text-3, #607080) !important;
  opacity: 0.9;
}

/* Hover/focus: slightly stronger grey */
.ag-theme-alpine .ag-header-cell:hover .ag-header-cell-menu-button .ag-icon,
.ag-theme-alpine .ag-header-cell:focus-within .ag-header-cell-menu-button .ag-icon {
  color: var(--text-2, #475569) !important;
  opacity: 1;
}

/* When menu is open: use primary blue (optional) */
.ag-theme-alpine .ag-header-cell-menu-button.ag-header-cell-menu-button-open .ag-icon,
.ag-theme-alpine .ag-header-cell.ag-header-cell-menu-open .ag-header-cell-menu-button .ag-icon {
  color: var(--primary-600, #0A58CA) !important;
}

/* Header menu/filter/columns buttons:
   - always visible
   - let icon colour be controlled separately
*/
.ag-theme-alpine .ag-header-cell-menu-button,
.ag-theme-alpine .ag-header-cell-filter-button,
.ag-theme-alpine .ag-header-cell-columns-button {
  opacity: 1;
  visibility: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Default icon colours for menu, filter, columns:
   neutral grey with good contrast on light headers */
.ag-theme-alpine .ag-header-cell-menu-button .ag-icon,
.ag-theme-alpine .ag-header-cell-filter-button .ag-icon,
.ag-theme-alpine .ag-header-cell-columns-button .ag-icon,
.ag-theme-alpine .ag-icon-menu,
.ag-theme-alpine .ag-icon-filter,
.ag-theme-alpine .ag-icon-columns,
.ag-theme-alpine .ag-icon-menu:before,
.ag-theme-alpine .ag-icon-filter:before,
.ag-theme-alpine .ag-icon-columns:before {
  color: var(--text-3, #607080);
  fill: currentColor;
  opacity: 0.9;
}

/* Hover / focus: slightly stronger neutral for better affordance */
.ag-theme-alpine .ag-header-cell:hover .ag-header-cell-menu-button .ag-icon,
.ag-theme-alpine .ag-header-cell:hover .ag-header-cell-filter-button .ag-icon,
.ag-theme-alpine .ag-header-cell:hover .ag-header-cell-columns-button .ag-icon,
.ag-theme-alpine .ag-header-cell-menu-button:focus-visible .ag-icon,
.ag-theme-alpine .ag-header-cell-filter-button:focus-visible .ag-icon,
.ag-theme-alpine .ag-header-cell-columns-button:focus-visible .ag-icon {
  color: var(--text-2, #475569);
  opacity: 1;
}

/* When the menu is open: use primary/brand colour so state is obvious */
.ag-theme-alpine .ag-header-cell-menu-button.ag-header-cell-menu-button-open .ag-icon,
.ag-theme-alpine .ag-header-cell.ag-header-cell-menu-open .ag-header-cell-menu-button .ag-icon {
  color: var(--primary-600, var(--blue-600));
}

/* Keyboard focus ring for accessibility */
.ag-theme-alpine .ag-header-cell-menu-button:focus-visible,
.ag-theme-alpine .ag-header-cell-filter-button:focus-visible,
.ag-theme-alpine .ag-header-cell-columns-button:focus-visible {
  outline: 2px solid var(--primary-600, var(--blue-600));
  outline-offset: 2px;
}
/* Fix dbc.RadioItems alignment inside CardHeader (circles + text) */
.card-header.custom-card-header .form-check{
  margin-bottom: 0;          /* kill extra vertical space */
}

.card-header.custom-card-header .form-check-inline{
  display: inline-flex;       /* stop baseline weirdness */
  align-items: center;        /* vertically center input + label */
  gap: 0.40rem;               /* spacing between circle and text */
  padding-left: 0;            /* remove bootstrap indent */
}

.card-header.custom-card-header .form-check-inline .form-check-input{
  float: none;                /* override bootstrap float */
  margin: 0;                  /* removes bootstrap margin-top: .25em */
}

.card-header.custom-card-header .form-check-inline .form-check-label{
  margin: 0;
  line-height: 1;             /* keep the label visually centered */
}