/* ============================================================================
 *  Overview page polish  --  /overview-theme.css
 *  ---------------------------------------------------------------------------
 *  Loaded from /overview-theme.css on every console page (see overview-theme.sh)
 *  but every rule is scoped to [data-lmx-panel] / .lmx-*, which the companion
 *  script only adds on /dashboard. Uses the app's own design tokens, so it
 *  follows light/dark and every theme preset automatically.
 *
 *  Nothing here changes layout geometry in a way React could fight: only
 *  colours, borders, shadows and inline chips.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. Panel card
 * ------------------------------------------------------------------------ */
[data-lmx-panel] {
  position: relative;
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}

[data-lmx-panel]:hover {
  border-color: color-mix(in oklch, var(--primary) 30%, var(--border));
  box-shadow:
    0 1px 2px color-mix(in oklch, var(--foreground) 6%, transparent),
    0 12px 28px -18px color-mix(in oklch, var(--primary) 45%, transparent);
}

@media (hover: hover) {
  [data-lmx-panel]:hover { transform: translateY(-1px); }
}

/* --------------------------------------------------------------------------
 * 2. Panel header -- soft tint so the four panels read as a set
 * ------------------------------------------------------------------------ */
[data-lmx-panel] > div:first-child {
  background-image: linear-gradient(
    180deg,
    color-mix(in oklch, var(--primary) 8%, transparent) 0%,
    color-mix(in oklch, var(--primary) 3%, transparent) 55%,
    transparent 100%
  );
  border-bottom-color: color-mix(in oklch, var(--primary) 18%, var(--border));
}

/* --------------------------------------------------------------------------
 * 3. Count / status chips
 * ------------------------------------------------------------------------ */
.lmx-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-left: .5rem;
  padding: .0625rem .4375rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .01em;
  white-space: nowrap;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.lmx-chip-brand {
  background: color-mix(in oklch, var(--primary) 14%, transparent);
  border-color: color-mix(in oklch, var(--primary) 30%, transparent);
  color: color-mix(in oklch, var(--primary) 78%, var(--foreground));
}

.lmx-chip-info {
  background: color-mix(in oklch, var(--info) 14%, transparent);
  border-color: color-mix(in oklch, var(--info) 30%, transparent);
  color: color-mix(in oklch, var(--info) 78%, var(--foreground));
}

.lmx-chip-warn {
  background: color-mix(in oklch, var(--warning) 16%, transparent);
  border-color: color-mix(in oklch, var(--warning) 32%, transparent);
  color: color-mix(in oklch, var(--warning) 80%, var(--foreground));
}

.lmx-chip-ok {
  background: color-mix(in oklch, var(--success) 14%, transparent);
  border-color: color-mix(in oklch, var(--success) 32%, transparent);
  color: color-mix(in oklch, var(--success) 82%, var(--foreground));
}

.lmx-chip-bad {
  background: color-mix(in oklch, var(--destructive) 14%, transparent);
  border-color: color-mix(in oklch, var(--destructive) 32%, transparent);
  color: color-mix(in oklch, var(--destructive) 82%, var(--foreground));
}

/* --------------------------------------------------------------------------
 * 4. Announcements -- hover rail + "NEW" corner pill
 * ------------------------------------------------------------------------ */
[data-lmx-panel="announcements"] button {
  position: relative;
}

[data-lmx-panel="announcements"] button::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 2px;
  background: var(--primary);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

[data-lmx-panel="announcements"] button:hover::before {
  opacity: .5;
}

[data-lmx-panel="announcements"] button.lmx-new::after {
  content: "NEW";
  position: absolute;
  inset-block-start: .5rem;
  inset-inline-end: .75rem;
  padding: .0625rem .375rem;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    var(--primary) 0%,
    color-mix(in oklch, var(--primary) 55%, var(--chart-2, var(--primary))) 100%
  );
  color: var(--primary-foreground, #fff);
  font-size: .5625rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.5;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 14%, transparent);
  pointer-events: none;
}

[data-lmx-panel="announcements"] button.lmx-new p {
  padding-inline-end: 3rem;
}

/* --------------------------------------------------------------------------
 * 5. Uptime -- colour-coded availability pills
 * ------------------------------------------------------------------------ */
.lmx-pct {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 4.5rem;
  padding: .0625rem .4375rem;
  border: 1px solid transparent;
  border-radius: .5rem;
  font-variant-numeric: tabular-nums;
  transition: background-color .2s ease, border-color .2s ease;
}

.lmx-pct-ok {
  background: color-mix(in oklch, var(--success) 13%, transparent);
  border-color: color-mix(in oklch, var(--success) 28%, transparent);
  color: color-mix(in oklch, var(--success) 85%, var(--foreground));
}

.lmx-pct-warn {
  background: color-mix(in oklch, var(--warning) 15%, transparent);
  border-color: color-mix(in oklch, var(--warning) 30%, transparent);
  color: color-mix(in oklch, var(--warning) 85%, var(--foreground));
}

.lmx-pct-bad {
  background: color-mix(in oklch, var(--destructive) 14%, transparent);
  border-color: color-mix(in oklch, var(--destructive) 30%, transparent);
  color: color-mix(in oklch, var(--destructive) 85%, var(--foreground));
}

.lmx-pct-unknown {
  background: var(--muted);
  border-color: var(--border);
  color: var(--muted-foreground);
}

/* --------------------------------------------------------------------------
 * 6. FAQ -- calmer accordion
 * ------------------------------------------------------------------------ */
[data-lmx-panel="faq"] [data-slot="accordion-trigger"],
[data-lmx-panel="faq"] button[data-state] {
  border-radius: .5rem;
  transition: background-color .18s ease;
}

[data-lmx-panel="faq"] [data-slot="accordion-trigger"]:hover,
[data-lmx-panel="faq"] button[data-state]:hover {
  background: color-mix(in oklch, var(--primary) 6%, transparent);
}

/* --------------------------------------------------------------------------
 * 7. API info -- make the route line pop, keep the URL quiet
 * ------------------------------------------------------------------------ */
[data-lmx-panel="api-info"] .font-mono {
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
 * 8. Respect reduced motion / print
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  [data-lmx-panel],
  .lmx-pct,
  [data-lmx-panel="announcements"] button::before {
    transition: none;
  }
  [data-lmx-panel]:hover { transform: none; }
}

@media print {
  [data-lmx-panel]:hover { transform: none; box-shadow: none; }
}