/*
 * DataLux — RIA Acquisition Data Integration
 * PAGE-SPECIFIC CSS ONLY
 *
 * Load AFTER the site's existing Sandbox/EleMIS stylesheet.
 *
 * Deliberately NOT redefined here:
 * .container, .row, Bootstrap columns, typography, .btn, .card, .badge,
 * .wrapper, .bg-*, .text-*, spacing utilities, .icon, .accordion,
 * .process-wrapper, shadows, rounded utilities, etc.
 *
 * The page therefore inherits DataLux's actual Sandbox theme configuration,
 * including its real primary colour, fonts, component radii and breakpoints.
 */

.ria-page .ria-flow-card {
  max-width: 34rem;
  margin-inline: auto;
}

.ria-page .ria-system-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.ria-page .ria-system-tile {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  padding: .8rem .9rem;
  border: 1px solid var(--bs-border-color, #e3e8ee);
  border-radius: .6rem;
  background: var(--bs-light, #f6f7f9);
  color: var(--bs-dark, #343f52);
  font-size: .8rem;
  font-weight: 700;
}

.ria-page .ria-featured-card {
  transform: translateY(-.5rem);
}

.ria-page .ria-workload-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ria-page .ria-chart-grid {
  fill: none;
  stroke: rgba(255, 255, 255, .11);
  stroke-width: 1;
}

.ria-page .ria-chart-capacity {
  fill: none;
  stroke: rgba(255, 255, 255, .55);
  stroke-width: 2;
  stroke-dasharray: 7 7;
}

.ria-page .ria-chart-work {
  fill: none;
  stroke: var(--bs-primary);
  stroke-width: 3.4;
  stroke-linecap: round;
}

.ria-page .ria-chart-surge {
  fill: rgba(var(--bs-primary-rgb), .22);
}

.ria-page .ria-chart-cutover {
  stroke: var(--bs-warning, #fab758);
  stroke-width: 1.6;
  stroke-dasharray: 4 6;
}

.ria-page .ria-chart-label {
  fill: rgba(255, 255, 255, .65);
  font-size: 11px;
  font-family: inherit;
}

.ria-page .ria-chart-label-cutover {
  fill: var(--bs-warning, #fab758);
  font-weight: 700;
}

.ria-page .ria-legend {
  display: inline-block;
  width: 1rem;
  height: 3px;
  margin-right: .4rem;
  border-radius: 1rem;
  vertical-align: middle;
}

.ria-page .ria-legend-work {
  background: var(--bs-primary);
}

.ria-page .ria-legend-capacity {
  background: rgba(255, 255, 255, .55);
}

.ria-page .ria-legend-surge {
  background: rgba(var(--bs-primary-rgb), .45);
}

@media (max-width: 991.98px) {
  .ria-page .ria-featured-card {
    transform: none;
  }
}

@media (max-width: 575.98px) {
  .ria-page .ria-system-grid {
    grid-template-columns: 1fr;
  }
}