/**
 * Demo Mode indicator bar
 * ============================================
 * Slim sticky bar shown while the user explores with the sample team
 * (js/features/demo-mode.js showDemoIndicator). Until now the markup had NO
 * CSS at all, so it rendered as raw flow-layout text + a default button,
 * crowding the top of the page. This styles it as a clean pinned bar in the
 * same idiom as the offline / consent-revoked banners (css/data-freshness.css):
 * sticky top, gradient fill, themed tokens, sane z-index.
 *
 * It is a POSITIVE state ("you're exploring sample data"), not a warning, so
 * it uses the brand teal rather than amber/red.
 */

.demo-mode-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  /* Brand teal → cyan, low-saturation so it reads as a calm "mode" banner. */
  background: linear-gradient(135deg, var(--primary-500, #14b8a6) 0%, var(--accent-500, #06b6d4) 100%);
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow-md, 0 2px 4px rgba(0, 0, 0, 0.1));
}

.demo-indicator-content {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0; /* allow the subtitle to ellipsize on narrow screens */
}

.demo-indicator-content > i {
  font-size: 15px;
  opacity: 0.95;
  flex: 0 0 auto;
}

.demo-indicator-content > span:not(.demo-subtitle) {
  font-weight: 700;
  letter-spacing: 0.01em;
  flex: 0 0 auto;
}

.demo-subtitle {
  font-weight: 400;
  opacity: 0.85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* A subtle separator dot between title and subtitle, drawn in CSS so the
   markup stays just two plain spans. */
.demo-subtitle::before {
  content: '·';
  margin-right: 8px;
  opacity: 0.7;
}

.demo-exit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-md, 12px);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.demo-exit-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.85);
}
.demo-exit-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.demo-exit-btn > i {
  font-size: 12px;
}

/* Narrow screens: hide the longer "Exploring with sample team" subtitle and
   collapse the Exit button to its icon so the bar never wraps to two lines. */
@media (max-width: 560px) {
  .demo-subtitle { display: none; }
  .demo-exit-btn {
    padding: 6px 9px;
    font-size: 0;          /* hide the "Exit Demo" label … */
  }
  .demo-exit-btn > i { font-size: 14px; }  /* … keep the ✕ icon legible */
}