/* design-kit/css/portal-glance.css
   Agency portal — client detail "at-a-glance" status band + recent-activity
   feed polish. All colours, fonts, radii, spacing flow from the TIDAL tokens
   in tokens.css — no off-brand hardcoded values. */

/* ──────────────────────────────────────────────────────────
   At-a-glance status band (top of /portal/<slug>)
   ────────────────────────────────────────────────────────── */

.tcp-glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--tdl-space-3, 12px);
  margin: 0 0 var(--tdl-space-6, 24px);
}

.tcp-glance__tile {
  display: flex;
  flex-direction: column;
  gap: var(--tdl-space-1, 4px);
  padding: var(--tdl-space-4, 16px) var(--tdl-space-5, 20px);
  background: var(--tdl-surf-1);
  border: 1px solid var(--tdl-hairline);
  border-radius: var(--tdl-radius-lg, 8px);
  transition: border-color var(--tdl-dur-fast, 140ms) ease;
}
.tcp-glance__tile:hover { border-color: var(--tdl-hairline-2); }

.tcp-glance__lbl {
  font-family: var(--tdl-font-display);
  font-weight: 900;
  font-size: 9px;
  letter-spacing: var(--tdl-tracking-label, 0.14em);
  text-transform: uppercase;
  color: var(--tdl-fg-4);
}

.tcp-glance__val {
  font-family: var(--tdl-font-display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--tdl-fg);
  text-decoration: none;
  margin-top: var(--tdl-space-1, 4px);
}

.tcp-glance__val--muted { color: var(--tdl-fg-4); }

.tcp-glance__val--link {
  color: var(--tdl-accent);
  cursor: pointer;
}
.tcp-glance__val--link:hover { text-decoration: underline; }

.tcp-glance__sub {
  font-family: var(--tdl-font-body);
  font-size: 11px;
  color: var(--tdl-fg-3);
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: var(--tdl-space-2, 8px);
}

.tcp-glance__cta {
  margin-top: var(--tdl-space-2, 8px);
  font-family: var(--tdl-font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: var(--tdl-tracking-label, 0.14em);
  text-transform: uppercase;
  color: var(--tdl-accent);
  text-decoration: none;
  align-self: flex-start;
}
.tcp-glance__cta:hover { opacity: 0.8; }

/* Tiny status dots in the sub line */
.tcp-glance__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tdl-fg-5);
  flex-shrink: 0;
}
.tcp-glance__dot--ok   { background: var(--tdl-pos); }
.tcp-glance__dot--warn { background: var(--tdl-warn); }
.tcp-glance__dot--err  { background: var(--tdl-neg); }

/* Section / channel chips */
.tcp-glance__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tdl-space-1, 4px);
  margin-top: var(--tdl-space-1, 4px);
}

.tcp-glance__chip {
  font-family: var(--tdl-font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tdl-fg-2);
  background: var(--tdl-surf-3);
  border: 1px solid var(--tdl-hairline-2);
  border-radius: 999px;
  padding: 3px 8px;
}

/* ──────────────────────────────────────────────────────────
   Mobile
   ────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .tcp-glance { grid-template-columns: 1fr 1fr; gap: var(--tdl-space-2, 8px); }
  .tcp-glance__tile { padding: var(--tdl-space-3, 12px); }
  .tcp-glance__val { font-size: 14px; }
}
@media (max-width: 420px) {
  /* Two tiles side-by-side feel cramped on small phones; stack them. */
  .tcp-glance { grid-template-columns: 1fr; }
}