/* Company Overview. Palette, type scale and radii are the ones on Alan's spec
   sheet (2026-08-08): Inter, 8px spacing base, 4/6/8/12 radii, and the six
   colours below. High information density, no decoration that is not a fact. */
.company-overview {
  --co-blue: #2563eb;
  --co-green: #16a34a;
  --co-orange: #f59e0b;
  --co-red: #ef4444;
  --co-purple: #7c3aed;
  --co-n200: #f1f5f9;
  --co-n300: #e2e8f0;
  --co-n600: #475569;
  --co-n900: #0f172a;
  --co-surface: #fff;

  display: grid;
  gap: 16px;
  /* Clear of the shell's photographic band. Without the page title the content
     started right under the chrome and the KPI tiles sat on the photograph
     (Alan, 2026-08-08). */
  margin: 0;
  padding-block-start: clamp(18px, 4vh, 44px);
  color: var(--co-n900);
  /* The spec sheet says Inter and no Inter is loaded - the font link carries
     Lato, Montserrat, Noto Sans SC and Roboto. Naming a font nobody has is how
     the CJK text ended up on whatever the OS picked (Alan, 2026-08-01), so this
     takes the shell's own stack instead and the page matches its neighbours. */
  font-family: var(--font-display, "Segoe UI", system-ui, "Noto Sans SC", sans-serif);
}

.company-overview__head h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.15;
}

/* The KPI bar stays put while the cards scroll under it - it is the summary the
   cards are a breakdown of, and losing it means counting again.
   .app-main has no overflow of its own, so the page is what scrolls and this
   sticks to the viewport. z-index stays under the topbar's 70 on purpose: for the
   first 64px of scroll the bar tucks beneath the chrome rather than colliding
   with it, and pins once the topbar has gone. The backdrop is the authenticated
   page colour, not a guess at it, so the pinned bar is not a mismatched band. */
.company-kpis {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
  margin: 0 -2px;
  padding: 4px 2px;
  background: linear-gradient(
    var(--dashboard-enterprise-bg, #f7f9fc) 82%,
    transparent
  );
}

.company-kpi {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--co-n300);
  border-radius: 12px;
  background: var(--co-surface);
  padding: 13px 14px;
}

.company-kpi__icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: none;
  place-items: center;
  border-radius: 8px;
  background: var(--co-n200);
  color: var(--co-n600);
  font-size: 19px;
}

.company-kpi--good .company-kpi__icon { background: rgba(22, 163, 74, .1); color: var(--co-green); }
.company-kpi--late .company-kpi__icon { background: rgba(239, 68, 68, .1); color: var(--co-red); }

.company-kpi__body {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.company-kpi__label {
  color: var(--co-n600);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.company-kpi__value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
}

.company-kpi__note {
  overflow: hidden;
  color: var(--co-n600);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Three across, four on a wide screen - not as many as will fit.
   auto-fill at 272px put nine cards on a 2100px monitor at about 250px each,
   which truncated "MW Technology Logistics Inc" and turned the numbers into
   confetti. There are nine customers today and Alan does not expect hundreds
   (2026-08-08), so the fleet is not a wall to be tiled: each company gets room.
   The count is fixed per band rather than left to auto-fill, because auto-fill
   answers "how many fit" and the question here is "how many should there be". */
.company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 14px;
}

/* A wider card is only worth having if the card uses the width, so the numbers
   grow with it rather than sitting in a corner of a bigger box. */
@media (min-width: 1200px) {
  .company-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .company-card { gap: 13px; padding: 17px 19px 18px; }
  .company-card__head h2 { font-size: 16.5px; }
  .company-stat strong { font-size: 25px; }
  .company-stat span,
  .company-money span { font-size: 11.5px; }
  .company-money strong { font-size: 16px; }
  .company-ring { width: 52px; height: 52px; }
  .company-quoted,
  .company-note { font-size: 11.5px; }
}

@media (min-width: 1900px) {
  .company-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.company-card {
  display: grid;
  min-width: 0;
  gap: 11px;
  align-content: start;
  border: 1px solid var(--co-n300);
  border-radius: 12px;
  background: var(--co-surface);
  padding: 14px 15px 15px;
}

.company-card__head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.company-card__head h2 {
  overflow: hidden;
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.012em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-badge {
  flex: none;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
}

.company-badge--active { background: rgba(22, 163, 74, .11); color: #12803b; }
.company-badge--warning { background: rgba(245, 158, 11, .14); color: #a45c06; }
.company-badge--delayed { background: rgba(239, 68, 68, .12); color: #c0392f; }
.company-badge--settled { background: var(--co-n200); color: var(--co-n600); }

.company-card__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: center;
  gap: 8px;
}

.company-stat {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.company-stat strong {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.company-stat span {
  overflow: hidden;
  color: var(--co-n600);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-stat--done strong { color: var(--co-green); }
.company-stat--late strong { color: var(--co-red); }
/* Delivered and not yet paid for. Amber rather than red: it is money to collect,
   not a failure - and it sits beside a green Completed that would otherwise read
   as the whole story (Alan, 2026-08-11, for Finance and the owner). */
.company-stat--owing strong { color: var(--co-amber, #d97706); }

.company-ring { width: 44px; height: 44px; }

.company-ring circle {
  fill: none;
  stroke-width: 4;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.company-ring__track { stroke: var(--co-n200); }
.company-ring__value { stroke: var(--co-blue); stroke-linecap: round; }
.company-ring__value--active { stroke: var(--co-green); }
.company-ring__value--warning { stroke: var(--co-orange); }
.company-ring__value--delayed { stroke: var(--co-red); }
.company-ring__value--settled { stroke: var(--co-n600); }

.company-ring__label {
  fill: var(--co-n900);
  font-size: 11px;
  font-weight: 650;
}

.company-progress {
  height: 3px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--co-n200);
}

.company-progress__value {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--co-blue);
}

.company-progress__value--active { background: var(--co-green); }
.company-progress__value--warning { background: var(--co-orange); }
.company-progress__value--delayed { background: var(--co-red); }
.company-progress__value--settled { background: var(--co-n600); }

/* One chip per Ocean Status the company holds, in the table's reading order. */
.company-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.company-status {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  border: 1px solid var(--co-n300);
  border-radius: 6px;
  padding: 3px 7px;
  color: var(--co-n600);
  font-size: 11px;
  line-height: 1.3;
}

.company-status strong {
  color: var(--co-n900);
  font-size: 12px;
  font-weight: 680;
}

/* The three that carry urgency get a tint; everything else stays quiet, so the
   colour means something when it appears. */
.company-status[data-status="empty_return_reported"] { border-color: rgba(22, 163, 74, .3); }
.company-status[data-status="empty_return_reported"] strong { color: var(--co-green); }
.company-status[data-status="available_for_pickup"] { border-color: rgba(37, 99, 235, .3); }
.company-status[data-status="available_for_pickup"] strong { color: var(--co-blue); }
.company-status[data-status="inspection"] { border-color: rgba(245, 158, 11, .38); }
.company-status[data-status="inspection"] strong { color: #a45c06; }

.company-money {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border-top: 1px solid var(--co-n200);
  padding-top: 10px;
}

.company-money > div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.company-money span {
  color: var(--co-n600);
  font-size: 11px;
}

.company-money strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.012em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-money > div:last-child strong { color: var(--co-orange); }

.company-quoted,
.company-note {
  margin: -2px 0 0;
  color: var(--co-n600);
  font-size: 11px;
  line-height: 1.35;
}

.company-empty {
  margin: 0;
  border: 1px dashed var(--co-n300);
  border-radius: 12px;
  padding: 28px;
  color: var(--co-n600);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 767px) {
  .company-overview__head h1 { font-size: 22px; }
  .company-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .company-kpi { padding: 11px 12px; gap: 9px; }
  .company-kpi__value { font-size: 19px; }
  /* Two tiles across leaves no room to ellipsis "Quoted on 80 of 452" into
     meaning, so it wraps instead. */
  .company-kpi__note { overflow: visible; white-space: normal; }
  .company-grid { grid-template-columns: 1fr; }
}