/* ===========================================================
   HKTV Dashboard · SHARED DESIGN TOKENS + APP NAV + BADGES
   Mockup-only file. Loaded by all 4 page mockups.
   =========================================================== */

:root {
  /* Brand */
  --pretties: #F9A8D4;
  --pretties-dark: #EC4899;
  --pretty: var(--pretties);          /* alias for monthly-report (singular form) */
  --pretty-dark: var(--pretties-dark);
  --wagaya: #F97316;
  --wagaya-dark: #C2410C;

  /* Surfaces */
  --bg: #F5F6F8;                      /* operational mode default */
  --bg-warm: #FAF7F2;                 /* editorial mode (used by .mode-editorial body) */
  --bg-2: #FFFFFF;                    /* monthly-report alias */
  --bg-3: #F3EFE8;                    /* monthly-report alias */
  --card: #FFFFFF;
  --border: #E5E7EB;
  --line: #F3F4F6;                    /* hairline */

  /* Ink */
  --ink: #111827;
  --ink-2: #4A5568;
  --ink-3: #8A8A8A;
  --text: var(--ink);                 /* index/compare alias */
  --muted: var(--ink-3);              /* index/compare alias */

  /* Semantic */
  --accent: #0EA5E9;                  /* sky */
  --sky: var(--accent);               /* insights alias */
  --vip: #B45309;
  --vip-bg: #FEF3C7;
  --vip-line: #F5D480;
  --promo: #047857;
  --promo-bg: #ECFDF5;
  --promo-line: #6EE7B7;
  --ok: #059669;
  --warn: #D97706;
  --bad: #DC2626;
  --bad-bg: #FEE2E2;
  --bad-line: #FECACA;
  --bad-strong: #991B1B;

  /* Typography */
  --font-ui: 'Inter','Segoe UI','Helvetica Neue','PingFang HK','PingFang SC',Roboto,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-mono: 'JetBrains Mono','SF Mono', Menlo, Consolas, monospace;
  --fs-base: 14px;

  /* Geometry */
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(16,23,41,.04), 0 6px 18px rgba(16,23,41,.05);
  --shadow-lg: 0 2px 4px rgba(16,23,41,.05), 0 18px 40px rgba(16,23,41,.09);
  --gap: 16px;
}

/* Body resets — applied via class so we don't fight page-specific styles */
body.tokens-applied {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--ink);
}

/* =========================================================
   APP NAV — single source of cross-page navigation
   ========================================================= */
.app-nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 4px;
  padding: 8px 16px;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 600;
}
.app-nav .brand-mark {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  background: conic-gradient(from 140deg, var(--pretties), var(--wagaya), var(--accent), #7C3AED, var(--pretties));
  box-shadow: 0 4px 10px rgba(236,72,153,.20);
  margin-right: 4px;
}
.app-nav .brand-name {
  font-weight: 700; color: var(--ink); margin-right: 12px; letter-spacing: 0.01em;
  white-space: nowrap;
}
.app-nav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  color: var(--ink-2); text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.app-nav a:hover { background: rgba(14,165,233,.08); color: var(--accent); }
.app-nav a.active { background: var(--accent); color: #fff; }
.app-nav a.active:hover { background: var(--accent); color: #fff; }
.app-nav .spacer { flex: 1; }
.app-nav .nav-meta { color: var(--ink-3); font-size: 11px; font-weight: 500; }
.app-nav .nav-meta b { color: var(--ink-2); font-weight: 600; }
.app-nav .nav-aux a { color: var(--ink-3); font-size: 12px; }
.app-nav .nav-aux a:hover { color: var(--accent); }

@media (max-width: 720px) {
  .app-nav { flex-wrap: wrap; padding: 6px 10px; }
  .app-nav .brand-name { font-size: 12px; margin-right: 6px; }
  .app-nav a { padding: 6px 10px; font-size: 12px; }
  .app-nav .nav-meta { display: none; }
}

/* =========================================================
   UNIFIED BADGES (VIP / PROMO / STORE PILLS)
   ========================================================= */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  border: 1px solid transparent; line-height: 1.4; white-space: nowrap;
}
.badge-vip   { background: var(--vip-bg);   color: var(--vip);   border-color: var(--vip-line); }
.badge-promo { background: var(--promo-bg); color: var(--promo); border-color: var(--promo-line); }
.badge-pretties { background: #FCE7F3; color: #BE185D; border-color: #F9A8D4; }
.badge-wagaya   { background: #FFEDD5; color: #C2410C; border-color: #FED7AA; }

/* ---- Legacy class aliases — inherit .badge base + map to tokens ----
   Existing markup like <span class="vip-badge">VIP</span> automatically
   adopts unified styling without changing HTML. Page-specific hardcoded
   color in old CSS is overridden here so token swaps propagate to all 4 pages.
*/
.vip-badge,
.promo-badge,
.store-pill,
.pill-store {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  border: 1px solid transparent; line-height: 1.4; white-space: nowrap;
}
.vip-badge {
  background: var(--vip-bg) !important;
  color: var(--vip) !important;
  border-color: var(--vip-line) !important;
}
.promo-badge {
  background: var(--promo-bg) !important;
  color: var(--promo) !important;
  border-color: var(--promo-line) !important;
}
/* store-pill / pill-store keep their dynamic background color (set inline
   per-store via JS), but unify shape, padding & font with tokens. */
.store-pill, .pill-store {
  color: #fff;
  font-size: 10px;       /* keep page-specific compactness */
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

/* =========================================================
   EMPTY STATE
   ========================================================= */
.empty-state {
  max-width: 640px; margin: 48px auto; padding: 36px 32px;
  background: var(--card); border: 1px dashed var(--pretties);
  border-radius: var(--radius-lg); text-align: center;
}
.empty-state h2 { color: var(--ink); margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.empty-state p { color: var(--ink-2); margin: 0 0 16px; font-size: 13px; }
.empty-state .cta {
  display: inline-block; padding: 10px 20px;
  background: linear-gradient(135deg, var(--pretties), var(--wagaya));
  color: #fff; border-radius: 8px; text-decoration: none;
  font-weight: 600; font-size: 13px;
}

/* =========================================================
   MODE: editorial (warm bg) — opt-in via body class
   ========================================================= */
body.mode-editorial { background: var(--bg-warm); }
body.mode-editorial .app-nav { background: rgba(250,247,242,.92); border-bottom-color: var(--bg-3); }