/* ═══════════════════════════════════════════════════════════════
   J-Bot Theme — Shared tile card component
   Resolves colors/fonts via --jbot-* canonical tokens, so it skins
   automatically on any theme. Additive: coexists with existing
   .panel / .card / .widget classes (never renames them).
   ═══════════════════════════════════════════════════════════════ */

.tile-card {
  position: relative;
  background: var(--jbot-bg-panel);
  border: 1px solid var(--jbot-border);
  padding: 14px 16px;
  color: var(--jbot-fg);
  font-family: var(--jbot-font-mono);
  transition: border-color var(--jbot-transition, 0.25s ease),
              background var(--jbot-transition, 0.25s ease);
}

.tile-card:hover {
  border-color: var(--jbot-border-hi);
  background: var(--jbot-bg-panel-hi);
}

/* Emphasis modifier for live-update / "hot" tiles */
.tile-card--hot {
  border-color: var(--jbot-alert);
}

.tile-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--jbot-border);
  gap: 12px;
}

.tile-card__title {
  color: var(--jbot-accent);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
}

.tile-card__meta {
  color: var(--jbot-fg-dim);
  font-size: 10px;
  letter-spacing: 1px;
  white-space: nowrap;
}

.tile-card__status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--jbot-accent);
  box-shadow: 0 0 6px var(--jbot-accent-glow, currentColor);
  animation: jbot-dot-pulse 2s ease-in-out infinite;
  vertical-align: middle;
}
.tile-card__status-dot--warn  { background: var(--jbot-warn); }
.tile-card__status-dot--alert { background: var(--jbot-alert); }
.tile-card__status-dot--idle  { background: var(--jbot-fg-muted); animation: none; }

@keyframes jbot-dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.tile-card__body {
  font-size: 13px;
  color: var(--jbot-fg);
  line-height: 1.5;
}

.tile-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px dotted var(--jbot-border);
  font-size: 10px;
  color: var(--jbot-fg-dim);
  letter-spacing: 1px;
}

.tile-card__timestamp {
  color: var(--jbot-fg-muted);
  font-variant-numeric: tabular-nums;
}

/* Grid wrapper for a row of tiles */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}