/* ─────────────────────────────────────────────────────────────────────
   Admin Dashboard — Phase 1 aesthetic improvements
   Loaded after the legacy admin-dashboard.css; every override uses
   !important so it wins over inline rules and the legacy stylesheet.

   Recommendations 1, 3, 4, 5, 6, 7, 8, 9, 10 (#2 is in JS).
   ───────────────────────────────────────────────────────────────────── */

:root {
  --adp-blue: #2A3FA8;
  --adp-blue-deep: #1E2D7A;
  --adp-cyan: #2EB6E0;
  --adp-blue-tint: rgba(42,63,168,0.08);
  --adp-blue-rule: rgba(42,63,168,0.22);
  --adp-text: #1A1F2E;
  --adp-dim: rgba(26,31,46,0.78);
  --adp-mut: rgba(26,31,46,0.62);
  --adp-rule: rgba(26,31,46,0.10);
  --adp-card: #FFFFFF;
  --adp-bg-1: #EDECEA;
  --adp-bg-2: #E5E4E2;
  --adp-shadow-soft: 0 12px 32px rgba(26,31,46,0.08);
  --adp-shadow-lift: 0 18px 44px rgba(26,31,46,0.12);
  --adp-font-eyebrow: 'Barlow Condensed', sans-serif;
  --adp-font-display: 'Marcellus', Georgia, serif;
  --adp-font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --adp-green: #2E9F7A;
  --adp-amber: #C68A2D;
  --adp-red: #C2435C;
  /* Single canonical gutter for all admin sections — every top-level
     card/wrapper anchors to this so left & right margins line up cleanly. */
  --adp-gutter: clamp(16px, 3vw, 28px);
  --adp-card-gap: 18px;
  /* Uniform corner radius for every top-level card on the admin surface. */
  --adp-card-radius: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════
   #0 — STANDARDIZED GUTTER + VERTICAL RHYTHM
   The hero, stat bar, and the legacy .content wrapper are siblings of
   <main class="main">. Force them all to the same outer gutter so left
   and right margins align across the whole admin surface.
   ═════════════════════════════════════════════════════════════════════ */

/* Apply the gutter ONCE on <main>, then every direct child fills the
   remaining width and lines up perfectly. We zero out the inner gutter
   on .content (was 28px) and zero out the per-card horizontal margins
   on the hero / stat bar. Every visible card edge — hero, stat bar, the
   .content children (overview grid, tables, panels) — ends up sitting
   at exactly var(--adp-gutter) from the viewport edge. */
body main.main {
  padding-left: var(--adp-gutter) !important;
  padding-right: var(--adp-gutter) !important;
  box-sizing: border-box !important;
}
body main.main > .content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 24px !important;
  max-width: 1680px !important;
  width: 100% !important;
  margin: 0 auto !important;
}
body main.main > .cc-hero,
body main.main > .adp-statbar {
  max-width: 1680px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body main.main > .cc-hero {
  margin-top: var(--adp-card-gap) !important;
  margin-bottom: var(--adp-card-gap) !important;
}
body main.main > .adp-statbar {
  margin-top: var(--adp-card-gap) !important;
  margin-bottom: var(--adp-card-gap) !important;
}
/* Equalize the gap above the topmost visible card (no double margin
   collapse with the topbar). */
body main.main > *:first-child {
  margin-top: var(--adp-card-gap) !important;
}
body main.main > .content > .page-section {
  margin-top: 0 !important;
}

/* Force uniform 16px corner radius on every top-level admin card so all
   visible card edges look like one family. The legacy stylesheet ships
   .sci-panel as a notched diamond and .msg-center as 18px — normalize. */
body .sci-panel,
body .msg-center,
body .cc-orders-panel,
body .records-toolbar,
body .admin-records-rail,
body .chart-workspace,
body .admin-overview-grid > .sci-panel {
  border-radius: var(--adp-card-radius) !important;
  clip-path: none !important;
}
/* The .sci-panel ::before notch decoration must also be neutralized so
   the rounded corner stays clean. */
body .sci-panel::before { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   #1 — TOPBAR QUICK-RAIL: tighten label scale
   Already hides labels at <1024px; tighten the sizing so the row never
   feels crowded on iPad-portrait, and add a soft hover lift consistent
   with the rest of the site's pill chrome.
   ═════════════════════════════════════════════════════════════════════ */

body .topbar-quick-rail {
  gap: 6px !important;
}
body .topbar-quick-btn {
  font-family: var(--adp-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 0 14px !important;
  height: 36px !important;
  border-radius: 100px !important;
  background: var(--adp-card) !important;
  border: 1px solid var(--adp-blue-rule) !important;
  color: var(--adp-blue) !important;
  -webkit-text-fill-color: var(--adp-blue) !important;
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s !important;
  white-space: nowrap !important;
}
body .topbar-quick-btn:hover {
  background: var(--adp-blue-tint) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(42,63,168,0.16) !important;
}
body .topbar-quick-ico { width: 16px !important; height: 16px !important; flex: 0 0 auto !important; }
body .topbar-quick-ico svg { width: 14px !important; height: 14px !important; stroke: currentColor !important; }

@media (max-width: 1024px) {
  body .topbar-quick-btn {
    height: 34px !important;
    padding: 0 10px !important;
    gap: 0 !important;
  }
  body .topbar-quick-lbl { display: none !important; }
}
@media (max-width: 720px) {
  body .topbar-quick-rail { gap: 4px !important; }
  body .topbar-quick-btn { height: 32px !important; padding: 0 9px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   #4 — SIDEBAR section labels (Overview / Operations / Clients / etc.)
   Previously: 9px lowercase grey. Now: brand eyebrow chrome.
   ═════════════════════════════════════════════════════════════════════ */

body .nav-section-label {
  font-family: var(--adp-font-eyebrow) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--adp-blue) !important;
  -webkit-text-fill-color: var(--adp-blue) !important;
  padding: 18px 14px 8px !important;
  margin: 0 !important;
  text-shadow: none !important;
  position: relative !important;
}
body .nav-section-label:not(:first-child)::before {
  content: '' !important;
  position: absolute !important;
  top: 8px !important;
  left: 14px !important;
  right: 14px !important;
  height: 1px !important;
  background: var(--adp-rule) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   #5 — STAT BAR (uses the legacy hidden #statsGrid IDs)
   Surface the stats that legacy JS already updates every refresh tick.
   ═════════════════════════════════════════════════════════════════════ */

.adp-statbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 14px !important;
  padding: 12px 18px !important;
  background: var(--adp-card) !important;
  border: 1px solid var(--adp-rule) !important;
  border-left: 3px solid var(--adp-cyan) !important;
  /* Match the hero / message center / panels — all cards round 16px */
  border-radius: var(--adp-card-radius) !important;
  box-shadow: var(--adp-shadow-soft) !important;
  font-family: var(--adp-font-ui) !important;
  font-size: 13px !important;
  color: var(--adp-text) !important;
  overflow: hidden !important;
}
.adp-statbar-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 100px !important;
  background: var(--adp-blue-tint) !important;
  color: var(--adp-text) !important;
  cursor: pointer !important;
  border: 0 !important;
  font: inherit !important;
  transition: background 0.18s, transform 0.18s !important;
}
.adp-statbar-item:hover {
  background: rgba(42,63,168,0.14) !important;
  transform: translateY(-1px) !important;
}
.adp-statbar-num {
  font-family: var(--adp-font-eyebrow) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--adp-blue) !important;
}
.adp-statbar-lbl {
  font-family: var(--adp-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--adp-mut) !important;
}
.adp-statbar-item--alert .adp-statbar-num {
  color: var(--adp-red) !important;
}
.adp-statbar-item--alert {
  background: rgba(194,67,92,0.10) !important;
}
.adp-statbar-item--ok .adp-statbar-num {
  color: var(--adp-green) !important;
}
.adp-statbar-divider {
  width: 1px !important;
  height: 18px !important;
  background: var(--adp-rule) !important;
  flex: 0 0 auto !important;
}
.adp-statbar-item.is-zero {
  opacity: 0.55 !important;
}

@media (max-width: 720px) {
  .adp-statbar {
    padding: 10px 12px !important;
    gap: 6px 10px !important;
  }
  .adp-statbar-divider { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   #7 — KILL the dead cc-hero-img download
   The new light overlay already hides the dark molecule banner. Stop
   downloading the 1.2MB image entirely.
   ═════════════════════════════════════════════════════════════════════ */

body main.main .cc-hero .cc-hero-img,
body main.main .cc-hero .mbr-banner-asset,
body main.main .cc-hero .mbr-banner-scrim,
body main.main .cc-hero .cc-hero-overlay,
body main.main .cc-hero .cc-hero-tint,
body main.main .cc-hero .cc-hero-bottom-line {
  display: none !important;
}
/* When the hero shows the welcome content (overview), keep that content
   visible — the legacy .admin-hero-grid is what we want. */
body main.main[data-cc-section="overview"] .cc-hero-content {
  display: none !important;
}
body main.main[data-cc-section="overview"] .admin-hero-grid {
  display: grid !important;
}
/* Repaint the hero card to a clean white panel; the cyan-blue accent bar
   is added as a right-edge gradient. */
body main.main .cc-hero {
  background: var(--adp-card) !important;
  background-image: none !important;
  border: 1px solid var(--adp-rule) !important;
  border-radius: var(--adp-card-radius) !important;
  box-shadow: var(--adp-shadow-soft) !important;
  position: relative !important;
  overflow: hidden !important;
}
body main.main .cc-hero::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: linear-gradient(180deg, var(--adp-cyan) 0%, var(--adp-blue) 100%) !important;
  display: block !important;
  z-index: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   #8 — REALTIME STATUS INDICATOR: dot only, with hover tooltip via title
   No visible text. The dot's color + animation conveys state. The full
   state label lives in a `title` attribute set by JS (admin-dashboard.js).
   ═════════════════════════════════════════════════════════════════════ */

body .cc-realtime-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  width: 14px !important;
  height: 14px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  position: relative !important;
  cursor: help !important;
  overflow: visible !important;
}
body .cc-realtime-status > * {
  display: none !important;
}
body .cc-realtime-status::before {
  content: '' !important;
  display: inline-block !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--adp-mut) !important;
  flex: 0 0 auto !important;
}
body .cc-realtime-status::after {
  content: '' !important;
  display: none !important;
}
body .cc-realtime-status--live::before {
  background: var(--adp-green) !important;
  box-shadow: 0 0 0 4px rgba(46,159,122,0.16) !important;
  animation: adpPulse 2s ease-in-out infinite !important;
}
body .cc-realtime-status--connecting::before,
body .cc-realtime-status--reconnecting::before {
  background: var(--adp-amber) !important;
  box-shadow: 0 0 0 4px rgba(198,138,45,0.16) !important;
  animation: adpPulse 1s ease-in-out infinite !important;
}
body .cc-realtime-status--paused::before {
  background: var(--adp-mut) !important;
  box-shadow: 0 0 0 4px rgba(26,31,46,0.10) !important;
}
body .cc-realtime-status--error::before {
  background: var(--adp-red) !important;
  box-shadow: 0 0 0 4px rgba(194,67,92,0.18) !important;
}

@keyframes adpPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ═══════════════════════════════════════════════════════════════════════
   #3 — UNIFY Practice Pulse rows + Action Tiles visual system
   Practice Pulse rows get the same card chrome as action tiles:
   white card, brand-blue accent strip on the left, identical hover.
   ═════════════════════════════════════════════════════════════════════ */

body .admin-msgboard {
  background: var(--adp-card) !important;
  background-image: none !important;
  border: 1px solid var(--adp-rule) !important;
  border-radius: 16px !important;
  box-shadow: var(--adp-shadow-soft) !important;
  padding: 18px 20px !important;
  position: relative !important;
  overflow: hidden !important;
}
body .admin-msgboard::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--adp-cyan), var(--adp-blue)) !important;
}
body .admin-msgboard-title {
  font-family: var(--adp-font-display) !important;
  color: var(--adp-text) !important;
  -webkit-text-fill-color: var(--adp-text) !important;
  background: none !important;
  background-image: none !important;
  text-shadow: none !important;
  letter-spacing: -0.005em !important;
}
body .admin-msgboard-hint {
  color: var(--adp-mut) !important;
  -webkit-text-fill-color: var(--adp-mut) !important;
  font-family: var(--adp-font-ui) !important;
  font-size: 13px !important;
  text-shadow: none !important;
}
body .admin-msgboard-open {
  font-family: var(--adp-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--adp-blue) !important;
  -webkit-text-fill-color: var(--adp-blue) !important;
  background: var(--adp-card) !important;
  border: 1px solid var(--adp-blue-rule) !important;
  border-radius: 100px !important;
  padding: 6px 14px !important;
  text-decoration: none !important;
  text-shadow: none !important;
}
body .admin-msgboard-open:hover {
  background: var(--adp-blue-tint) !important;
  text-decoration: none !important;
}
body .admin-msgboard-feed {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 12px !important;
}
body .admin-msgboard-row {
  background: var(--adp-bg-1) !important;
  background-image: none !important;
  border: 1px solid var(--adp-rule) !important;
  border-left: 3px solid var(--adp-blue) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  cursor: pointer !important;
  text-align: left !important;
  font: inherit !important;
  width: 100% !important;
  transition: background 0.18s, transform 0.18s, border-color 0.18s !important;
  color: var(--adp-text) !important;
}
body .admin-msgboard-row:hover {
  background: var(--adp-blue-tint) !important;
  transform: translateY(-1px) !important;
  border-color: var(--adp-blue) !important;
}
body .admin-msgboard-row--unread {
  border-left-color: var(--adp-cyan) !important;
}
body .admin-msgboard-row--refills {
  border-left-color: var(--adp-amber) !important;
}
body .admin-msgboard-row--lowstock {
  border-left-color: var(--adp-red) !important;
}
body .admin-msgboard-row--intakes {
  border-left-color: var(--adp-blue) !important;
}
body .admin-msgboard-row-ico {
  color: var(--adp-blue) !important;
}
body .admin-msgboard-row-ico svg {
  stroke: currentColor !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   #9 — WELCOME hero balance: tighten logo/Pulse grid
   Previously: huge logo on left, narrow Pulse on right with awkward
   vertical space. Now: 4:6 grid, both columns vertically centered,
   reduced logo max-size, Pulse expands to use available width.
   ═════════════════════════════════════════════════════════════════════ */

body main.main[data-cc-section="overview"] .admin-hero-grid {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
  gap: 28px !important;
  align-items: center !important;
  padding: 24px 0 !important;
  width: min(1320px, calc(100% - 48px)) !important;
}
body .admin-hero-logo--xl {
  max-width: 280px !important;
  margin: 0 auto !important;
}
body .admin-hero-right {
  align-items: stretch !important;
  gap: 16px !important;
}
body .admin-hero-right .admin-welcome-text {
  align-items: flex-start !important;
  text-align: left !important;
}
body .admin-hero-right .admin-welcome-actions-line {
  justify-content: flex-start !important;
}
body .admin-welcome-eyebrow {
  font-family: var(--adp-font-eyebrow) !important;
  color: var(--adp-blue) !important;
  -webkit-text-fill-color: var(--adp-blue) !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}
body .admin-welcome-eyebrow::before { display: none !important; content: none !important; }
body .admin-welcome-line2 {
  font-family: var(--adp-font-display) !important;
  color: var(--adp-text) !important;
  -webkit-text-fill-color: var(--adp-text) !important;
  background: none !important;
  background-image: none !important;
  letter-spacing: -0.005em !important;
  text-shadow: none !important;
  font-size: clamp(28px, 4vw, 40px) !important;
}
body .admin-welcome-badge {
  font-family: var(--adp-font-eyebrow) !important;
  background: var(--adp-blue-tint) !important;
  color: var(--adp-blue) !important;
  -webkit-text-fill-color: var(--adp-blue) !important;
  border: 1px solid var(--adp-blue-rule) !important;
  border-radius: 100px !important;
  padding: 4px 12px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

@media (max-width: 1100px) {
  body main.main[data-cc-section="overview"] .admin-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  body .admin-hero-logo--xl {
    max-width: 180px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   #10 — ACTION TILE hover lift to match site card pattern
   Was: -2px lift + thin shadow. Now: site standard -3px + deeper shadow,
   border-color brightens to brand blue on hover.
   ═════════════════════════════════════════════════════════════════════ */

body .action-tile:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--adp-shadow-lift) !important;
  border-color: var(--adp-blue) !important;
}
body .action-tile-cta {
  font-family: var(--adp-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--adp-blue) !important;
  -webkit-text-fill-color: var(--adp-blue) !important;
  text-decoration: none !important;
  transition: color 0.18s, transform 0.18s !important;
  text-shadow: none !important;
}
body .action-tile-cta:hover {
  color: var(--adp-blue-deep) !important;
  -webkit-text-fill-color: var(--adp-blue-deep) !important;
  transform: translateX(2px) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   #2 — ccConfirm() Promise-based modal
   Replaces native confirm() with branded chrome.
   ═════════════════════════════════════════════════════════════════════ */

.cc-confirm-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100200 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(12px, 3vw, 24px) !important;
  animation: adpFadeIn 0.18s ease !important;
}
.cc-confirm-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(26,31,46,0.72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  cursor: pointer !important;
}
.cc-confirm-card {
  position: relative !important;
  background: var(--adp-card) !important;
  border: 1px solid var(--adp-rule) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.32) !important;
  padding: 28px 26px 22px !important;
  max-width: 460px !important;
  width: 100% !important;
  font-family: var(--adp-font-ui) !important;
  color: var(--adp-text) !important;
  outline: none !important;
  animation: adpScaleIn 0.22s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}
.cc-confirm-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--adp-cyan), var(--adp-blue)) !important;
  border-radius: 16px 16px 0 0 !important;
}
.cc-confirm-msg {
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--adp-text) !important;
  -webkit-text-fill-color: var(--adp-text) !important;
  margin: 0 0 22px !important;
  text-shadow: none !important;
}
.cc-confirm-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-end !important;
}
.cc-confirm-cancel,
.cc-confirm-ok {
  font-family: var(--adp-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  border: 0 !important;
  border-radius: 100px !important;
  padding: 10px 22px !important;
  cursor: pointer !important;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s !important;
  text-shadow: none !important;
}
.cc-confirm-cancel {
  background: var(--adp-card) !important;
  color: var(--adp-text) !important;
  -webkit-text-fill-color: var(--adp-text) !important;
  border: 1px solid var(--adp-rule) !important;
}
.cc-confirm-cancel:hover {
  background: var(--adp-bg-1) !important;
}
.cc-confirm-ok {
  background: linear-gradient(135deg, var(--adp-blue), var(--adp-blue-deep)) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(42,63,168,0.28) !important;
}
.cc-confirm-ok:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(42,63,168,0.36) !important;
}
.cc-confirm-ok--destructive {
  background: linear-gradient(135deg, var(--adp-red), #8E2D43) !important;
  box-shadow: 0 6px 16px rgba(194,67,92,0.28) !important;
}
.cc-confirm-ok--destructive:hover {
  box-shadow: 0 10px 22px rgba(194,67,92,0.36) !important;
}
@keyframes adpFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes adpScaleIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════
   #6 — EMPTY STATE vocabulary
   Standardize: small mono-line icon, dim caption, optional CTA.
   ═════════════════════════════════════════════════════════════════════ */

body .cc-empty,
body .action-tile-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 28px 18px !important;
  color: var(--adp-mut) !important;
  -webkit-text-fill-color: var(--adp-mut) !important;
  font-family: var(--adp-font-ui) !important;
  font-size: 13px !important;
  font-style: italic !important;
  line-height: 1.55 !important;
  gap: 10px !important;
  text-shadow: none !important;
}
body .cc-empty svg,
body .action-tile-empty svg {
  width: 32px !important;
  height: 32px !important;
  stroke: var(--adp-blue) !important;
  fill: none !important;
  stroke-width: 1.5 !important;
  opacity: 0.5 !important;
}
body .cc-empty strong,
body .action-tile-empty strong {
  color: var(--adp-blue) !important;
  -webkit-text-fill-color: var(--adp-blue) !important;
  font-weight: 600 !important;
  font-style: normal !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   POST-AUDIT FIXES — surfaced by full admin walkthrough
   ═══════════════════════════════════════════════════════════════════════ */

/* Reports card titles — were #ECEEF4 (near-white, dark-theme leftover),
   invisible on the new white card surface. */
body .cc-rpt-card-name,
body .cc-rpt-card .cc-rpt-card-name {
  color: var(--adp-text) !important;
  -webkit-text-fill-color: var(--adp-text) !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}
/* While we're here — the Run report link inside each card is small
   blue text. Lock it to brand blue + readable weight. */
body .cc-rpt-card a,
body .cc-rpt-card .cc-rpt-card-cta {
  color: var(--adp-blue) !important;
  -webkit-text-fill-color: var(--adp-blue) !important;
  font-weight: 700 !important;
}

/* Messages section: the "Start a chat" pill was overflowing the right
   edge of the hero on iPad-portrait. Constrain it inside the card. */
body main.main #ccConversationsHeroBtn,
body main.main .cc-hero #ccConversationsHeroBtn,
body .cc-hero a[onclick*="startNewConversation"],
body .cc-hero button[onclick*="startNewConversation"] {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  margin-top: 14px !important;
  align-self: flex-end !important;
  max-width: calc(100% - 32px) !important;
}

/* Stat bar Members chip "—" looks like a typo when value is missing.
   Add a soft skeleton pulse so it's clearly "loading" not "broken".
   (Doesn't fix the data source — see commit message — but keeps the
   visual honest.) */
body .adp-statbar-item.is-zero .adp-statbar-num,
body #adpStatMembers .adp-statbar-num {
  opacity: 0.55 !important;
}