@use "sass:map";
@use "../base/color" as cl;
@use "../base/border" as bo;
@use "../base/font" as ft;
@use "../base/space" as sp;
@use "../base/variants" as vr;

// Cards
//
//   <div class="qo-card"> … </div>
//   <div class="qo-card qo-card-hover qo-card-primary"> … </div>

.qo-card {
  display: block;
  padding: sp.$space-3 sp.$space-4;
  background-color: cl.$background-default;
  border: bo.$border-width-sm solid cl.$border-default;
  border-radius: bo.$border-radius-md;
  box-shadow: cl.$shadow-sm;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;

  &.qo-card-flat { box-shadow: none; }
  &.qo-card-soft { border-color: cl.$border-light; }
  &.qo-card-plain { border: 0; box-shadow: none; }
  &.qo-card-pad-0 { padding: 0; }
  &.qo-card-pad-sm { padding: sp.$space-2 sp.$space-3; }
  &.qo-card-pad-lg { padding: sp.$space-4 sp.$space-5; }

  // Only an interactive card gets hover/focus affordance.
  &.qo-card-hover {
    cursor: pointer;
    &:hover { box-shadow: cl.$shadow-md; border-color: cl.$border-secondary; }
    &:focus-visible { outline: 0; box-shadow: cl.$focus-ring; }
  }

  // A left accent stripe in any semantic colour.
  @each $name, $spec in vr.$variants {
    &.qo-card-#{$name} {
      border-left: bo.$border-width-lg solid map.get($spec, base);
    }
  }
}

.qo-card-header {
  padding-bottom: sp.$space-3;
  margin-bottom: sp.$space-3;
  border-bottom: bo.$border-width-sm solid cl.$border-light;
  color: cl.$text-darker;
  font-size: ft.$font-size-lg;
  font-weight: ft.$font-weight-semibold;
}

.qo-card-body { display: block; }

.qo-card-footer {
  padding-top: sp.$space-3;
  margin-top: sp.$space-3;
  border-top: bo.$border-width-sm solid cl.$border-light;
}

// Metric / count card — icon chip, label, value, helper.
.qo-metric-card {
  min-height: 88px;
  padding: sp.$space-3 sp.$space-4;
  display: flex;
  align-items: center;
  gap: sp.$space-3;
  background-color: cl.$background-default;
  border: bo.$border-width-sm solid cl.$border-default;
  border-radius: bo.$border-radius-md;
  box-shadow: cl.$shadow-sm;
}

.qo-metric-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: bo.$border-radius-full;
  background-color: cl.$background-primary-soft;
  color: cl.$text-primary;
  font-size: ft.$font-size-xl;

  // Every tint variant, so a metric chip can be any status colour.
  @each $name, $spec in vr.$tint-variants {
    &.qo-metric-icon-#{$name} {
      background-color: map.get($spec, soft);
      color: map.get($spec, ink);
    }
  }
}

.qo-metric-label {
  margin: 0 0 2px;
  color: cl.$text-darker;
  font-size: ft.$font-size-sm;
  font-weight: ft.$font-weight-medium;
  line-height: ft.$line-height-xxs;
}

.qo-metric-value {
  margin: 0;
  color: cl.$text-darker;
  font-size: 24px;
  font-weight: ft.$font-weight-bold;
  line-height: 1.05;
}

.qo-metric-helper {
  margin-top: 3px;
  color: cl.$text-secondary;
  font-size: ft.$font-size-xs;
  font-weight: ft.$font-weight-regular;
}

// Responsive metric row: 5 → 3 → 1 columns.
.qo-metrics-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: sp.$space-3;

  @media (max-width: 1200px) {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}