/* Apollo Supply - status card shell (KPI cards, alert/activity panels).
   Structure adapted from the SpyderNet SOE engine's shared "status
   card" pattern (soe-status-cards.css) - copied and re-skinned, no
   dependency on that file. Layout/labels follow the source Apps
   Script Dashboard Module's own KPI/panel design rather than
   inventing a new one.
*/

.apollo-kpi-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin-bottom:16px;
}

.apollo-kpi-card {
  display:block;
  background:var(--apollo-card);
  border:1px solid var(--apollo-line);
  border-radius:14px;
  padding:14px 16px;
  text-align:center;
  text-decoration:none;
  color:inherit;
}

a.apollo-kpi-card {
  cursor:pointer;
  transition:border-color .12s ease, transform .12s ease;
}
a.apollo-kpi-card:hover {
  border-color:var(--apollo-blue);
  transform:translateY(-2px);
}

.apollo-kpi-title {
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.apollo-kpi-value {
  font-size:26px;
  font-weight:900;
  color:var(--apollo-text);
  margin:6px 0 4px;
}

.apollo-kpi-subtitle {
  font-size:10px;
  color:var(--apollo-muted);
  text-transform:uppercase;
  letter-spacing:.03em;
}

.apollo-panel-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:16px;
}

.apollo-panel {
  background:var(--apollo-card);
  border:1px solid var(--apollo-line);
  border-radius:14px;
  overflow:hidden;
}

.apollo-panel-header {
  padding:10px 16px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-bottom:2px solid var(--apollo-line);
}

.apollo-panel-body {
  padding:10px 16px;
  min-height:120px;
  max-height:420px;
  overflow-y:auto;
}

.apollo-alert-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  margin-bottom:6px;
  font-size:12px;
}

.apollo-alert-critical { background:rgba(217,54,54,.12); }
.apollo-alert-low { background:rgba(201,138,0,.12); }
html[data-apollo-theme="dark"] .apollo-alert-critical { background:rgba(255,91,91,.14); }
html[data-apollo-theme="dark"] .apollo-alert-low { background:rgba(244,185,66,.14); }

.apollo-alert-badge {
  font-size:10px;
  font-weight:800;
  padding:2px 8px;
  border-radius:999px;
}

.apollo-healthy-message {
  text-align:center;
  padding:20px 10px;
  font-weight:700;
  color:var(--apollo-green);
}

.apollo-activity-row {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:6px 0;
  border-bottom:1px solid var(--apollo-line);
  font-size:12px;
}
.apollo-activity-row:last-child { border-bottom:none; }

.apollo-activity-type {
  font-weight:800;
  font-size:10px;
  letter-spacing:.03em;
  min-width:78px;
}

.apollo-activity-desc { flex:1; color:var(--apollo-text); }
.apollo-activity-time { color:var(--apollo-muted); font-size:10px; white-space:nowrap; }

.apollo-empty-message {
  text-align:center;
  padding:20px 10px;
  color:var(--apollo-muted);
  font-size:12px;
}

.apollo-table-wrap {
  /* Per the CSS overflow spec, overflow-x:auto silently forces
     overflow-y to also compute as non-"visible" (there's no way to
     keep one axis truly visible while scrolling the other) - that
     makes THIS element the sticky containing block for the header
     row below, not the page. An auto-height wrapper never generates
     its own internal scroll (content always fits, so there's nothing
     for sticky to react to), which is exactly why the header row was
     just scrolling away with the rest of the table instead of
     sticking. Giving the wrapper a real bounded height + its own
     overflow-y:auto (the standard "boxed data grid" pattern) gives
     sticky an actual scrollport to pin against - short tables that
     fit within max-height are unaffected either way. */
  overflow-x:auto;
  overflow-y:auto;
  max-height:65vh;
}

.apollo-table {
  width:100%;
  /* border-collapse:collapse + position:sticky on <th> inside a
     scrolling ancestor is a known rendering bug in Chromium-based
     browsers - can cause the entire table body to fail to paint once
     the header actually goes sticky (exactly what "everything under
     Inventory disappeared" was). border-spacing:0 on a "separate"
     table produces the same visual look (no gaps between cells)
     without triggering it. */
  border-collapse:separate;
  border-spacing:0;
  font-size:12px;
}

.apollo-table th {
  position:sticky;
  top:0;
  background:var(--apollo-card);
  text-align:left;
  padding:8px 10px;
  border-bottom:2px solid var(--apollo-line);
  color:var(--apollo-muted);
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.03em;
  white-space:nowrap;
  z-index:1;
}

.apollo-table td {
  padding:7px 10px;
  border-bottom:1px solid var(--apollo-line);
  white-space:nowrap;
}

/* Clickable rows that open an inline action panel (Inventory quick-
   checkout, etc.) - the actions cell itself opts out via its own
   onclick="event.stopPropagation()" so Edit/Delete don't also toggle. */
.apollo-inv-row { cursor:pointer; }
.apollo-inv-action-row td { white-space:normal; cursor:default; }

/* Row-search result highlight (Inventory, etc.) - transition lets the
   class removal fade it back out instead of an abrupt cut. */
.apollo-row-highlight td {
  background:rgba(29,111,224,.22);
  transition:background 1.2s ease;
}
html[data-apollo-theme="dark"] .apollo-row-highlight td {
  background:rgba(76,154,255,.28);
}

.apollo-status-pill {
  display:inline-block;
  padding:2px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
}
.apollo-status-in-stock { background:rgba(30,158,82,.14); color:var(--apollo-green); }
.apollo-status-low-stock { background:rgba(201,138,0,.14); color:var(--apollo-yellow); }
.apollo-status-out-of-stock { background:rgba(217,54,54,.14); color:var(--apollo-red); }
html[data-apollo-theme="dark"] .apollo-status-in-stock { background:rgba(46,204,113,.16); }
html[data-apollo-theme="dark"] .apollo-status-low-stock { background:rgba(244,185,66,.16); }
html[data-apollo-theme="dark"] .apollo-status-out-of-stock { background:rgba(255,91,91,.16); }

@media (max-width:980px) {
  .apollo-kpi-grid { grid-template-columns:repeat(2, 1fr); }
  .apollo-panel-grid { grid-template-columns:1fr; }
}

@media (max-width:520px) {
  .apollo-kpi-grid { grid-template-columns:1fr; }
}