/*
 * Stat Component
 * Dashboard stat cards, stat lists, and admin link cards
 */

@layer components {
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--stats-grid-min), 1fr));
    gap: var(--block-space);
  }

  .stat-card {
    container-type: inline-size;
    padding: var(--block-space);
    background-color: var(--color-white);
    border: var(--border-standard);
    border-radius: var(--radius);
  }

  .stat-card--highlight {
    background-color: var(--color-gray-lightest);
  }

  .stat-card__value {
    font-size: clamp(1.625rem, 0.5vw + 1.375rem, 2rem);
    color: var(--color-gray-darker);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;

    @container (max-width: 14rem) {
      font-size: var(--text-xx-large);
    }

    @container (max-width: 10rem) {
      font-size: var(--text-x-large);
    }
  }

  .stat-card__label {
    font-size: var(--text-normal);
    color: var(--color-gray-dark);
    margin-top: var(--block-space-half);
  }

  /* Stat list — typographic alternative without card containers */
  .stat-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--stats-grid-min), 1fr));
    gap: var(--block-space);
  }

  .stat-list__item {
    container-type: inline-size;
    padding: var(--block-space) 0;
    overflow: hidden;
  }

  .stat-list__value {
    font-size: clamp(2rem, 1vw + 1.5rem, 3rem);
    color: var(--color-gray-darker);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
    line-height: var(--leading-tight);

    @container (max-width: 20rem) {
      font-size: clamp(1.625rem, 0.5vw + 1.375rem, 2rem);
    }

    @container (max-width: 14rem) {
      font-size: var(--text-xx-large);
    }

    @container (max-width: 10rem) {
      font-size: var(--text-x-large);
    }
  }

  .stat-list__label {
    font-size: var(--text-normal);
    color: var(--color-gray-dark);
    margin-top: var(--block-space-half);
  }

  /* Admin-density overrides */
  body.full .stat-card {
    padding: var(--block-space-3quarter);
  }

  body.full .stat-card__value {
    font-size: var(--text-xx-large);
  }

  body.full .stat-card__label {
    margin-top: var(--block-space-quarter);
  }

  /* Analytics dashboard grid — wider min than .stats-grid so hero cards
     sit 3-up at desktop, 2-up at tablet, 1-up mobile. Avoids 6-column
     crush that makes Revenue breakdown labels wrap mid-word. */
  .stats-grid--hero {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  }

  /* Sparkline (inline SVG line chart used on analytics hero cards) */
  .sparkline {
    display: block;
    width: 100%;
    height: 6rem;
    overflow: visible;
  }

  .sparkline__current {
    fill: none;
    stroke: var(--color-green);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
  }

  .sparkline__comparison {
    fill: none;
    stroke: var(--color-gray);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    vector-effect: non-scaling-stroke;
  }

  .sparkline--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px dashed var(--color-gray-light);
  }

  .sparkline__axis {
    display: flex;
    justify-content: space-between;
    margin-top: var(--block-space-quarter);
    font-size: var(--text-x-small);
    color: var(--color-gray);
  }

  .sparkline__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space);
    margin-top: var(--block-space-half);
    font-size: var(--text-x-small);
    color: var(--color-gray-dark);
  }

  .sparkline__legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--block-space-quarter);
  }

  .sparkline__swatch {
    display: inline-block;
    width: 0.875rem;
    height: 2px;
    border-radius: 1px;
  }

  .sparkline__swatch--current {
    background: var(--color-green);
  }

  .sparkline__swatch--comparison {
    background: repeating-linear-gradient(
      to right,
      var(--color-gray) 0 3px,
      transparent 3px 6px
    );
  }

  .hero-card__link {
    color: var(--color-green-dark);
    text-decoration: none;
  }

  .hero-card__link:hover {
    text-decoration: underline;
  }

  /* Pressed-state for toggle-style buttons (date range presets) */
  .btn[aria-pressed="true"] {
    --btn-background: var(--color-gray-darker);
    --btn-color: var(--color-white);
  }

  /* Analytics date-range picker — self-contained component.
     Mobile-first: everything wraps and the custom range expands inline.
     Desktop (≥640px): custom range floats as an absolute popover. */
  .date-range-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-half);
    align-items: center;
  }

  .date-range-picker .btn {
    --btn-padding-block: var(--block-space-quarter);
    --btn-padding-inline: var(--block-space-3quarter);
    font-size: var(--text-x-small);
  }

  .date-range-picker .input {
    --input-padding-block: var(--block-space-quarter);
    --input-padding-inline: var(--block-space-half);
    --input-font-size: var(--text-x-small);
    width: auto;
  }

  .date-range-picker details {
    position: relative;
  }

  .date-range-picker summary {
    list-style: none;
  }
  .date-range-picker summary::-webkit-details-marker { display: none; }

  .date-range-picker details[open] summary {
    --btn-background: var(--color-gray-darker);
    --btn-color: var(--color-white);
  }

  .date-range-picker details > form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-half);
    align-items: center;
    margin-block-start: var(--block-space-half);
  }

  /* Desktop: float the custom-range form as a popover anchored to the
     trigger so opening it doesn't reflow the row of preset buttons. */
  @media (min-width: 640px) {
    .date-range-picker details > form {
      position: absolute;
      flex-wrap: nowrap;
      inset-block-start: 100%;
      inset-inline-end: 0;
      padding: var(--block-space-half);
      background: var(--color-white);
      border: var(--border-standard);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      z-index: var(--z-dropdown);
    }
  }

  /* Hover tooltip rendered into <body> by the sparkline Stimulus controller */
  .sparkline-wrap {
    position: relative;
    cursor: crosshair;
  }

  .sparkline-tooltip {
    position: absolute;
    pointer-events: none;
    z-index: 100;
    padding: var(--block-space-half) var(--block-space-3quarter);
    background: var(--color-gray-darker);
    color: var(--color-white);
    border-radius: var(--radius);
    font-size: var(--text-x-small);
    line-height: var(--leading-tight);
    min-width: 10rem;
    box-shadow: 0 4px 12px oklch(0 0 0 / 15%);
  }

  .sparkline-tooltip__row {
    display: flex;
    justify-content: space-between;
    gap: var(--block-space);
  }

  .sparkline-tooltip__row + .sparkline-tooltip__row {
    margin-top: var(--block-space-quarter);
    color: var(--color-gray-light);
  }

  .sparkline-tooltip__value {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
  }

  .sparkline-tooltip__row--comparison .sparkline-tooltip__value {
    font-weight: 400;
  }

  .sparkline-indicator {
    position: absolute;
    width: 1px;
    background: var(--color-gray-medium);
    pointer-events: none;
  }
}