/* =============================================================
   ULife Dashboard — reskin polish layer
   Loads AFTER each page's inline <style> so it overrides cleanly.
   Brand colors / fonts were already swapped in markup; this adds
   the ULife card language, type, pill CTAs, and rank-track theme.
   ============================================================= */

body, .shell, .filter-input, .filter-select, .search-input, .period-select,
.affid-input, button, input, select, textarea, .cat-tab, .month-pill,
.viewby-btn, .rtab, .btn-go, .btn-export, .btn-clear, .btn-primary, .btn-ghost {
  font-family: var(--font-primary), 'Sarabun', system-ui, sans-serif !important;
}

.shell { background: var(--bg-page) !important; color: var(--ink-800); }
.content { background: var(--bg-page) !important; }
.sidebar { background: var(--surface) !important; border-right: 1px solid #EDEAFB !important; }
.topbar  { background: var(--surface) !important; border-bottom: 1px solid #EDEAFB !important; }
.logo-area { border-bottom: 1px solid #EDEAFB !important; }
.logo-row { gap: 0 !important; }
.logo-img { height: 26px !important; }

/* ---- ULife card language: soft shadow, 15px radius, faint purple hairline ---- */
.card, .chart-card, .kpi-card, .breakdown-card, .quick-card, .title-tracker,
.ttv-tier-card, .psv-detail-card, .period-row, .affid-bar, .announce-card,
.filter-bar, .report-bar, .stat-card, .member-chart-grid > div {
  border-radius: var(--r-card) !important;
  border: 1px solid #EEEBFB !important;
  box-shadow: var(--shadow-card) !important;
}
/* nested cards inside cards stay flat-ish */
.card .card { box-shadow: none !important; }

/* ---- Pill CTAs (ULife signature fully-rounded buttons) ---- */
.chat-btn, .promo-btn, .affid-apply-btn, .btn-primary, .btn-go, .dl-btn, .export-btn {
  border-radius: var(--r-button) !important;
  letter-spacing: var(--ls-wide);
}
.chat-btn:hover, .promo-btn:hover, .btn-primary:hover, .btn-go:hover { filter: brightness(0.96); }

/* primary action buttons -> lavender per ULife */
.btn-primary, .btn-go { background: var(--brand-lavender) !important; }

/* search / pill chrome */
.search-bar { background: var(--surface-3) !important; border-radius: var(--r-pill) !important; }
.tab-row, .month-pill-group, .viewby-group { border-radius: var(--r-img) !important; }

/* nav active -> brand purple bar (already purple via var swap; ensure white text) */
.nav-item.active, .nav-item.active a { color: #fff !important; }
.nav-item.active { background: var(--brand-purple) !important; }

/* FAB */
.fab { background: var(--brand-purple) !important; box-shadow: 0 6px 20px rgba(100,70,240,.35) !important; }

/* badges / promo accent: keep amber promo tag readable */
.promo-banner { background: var(--brand-purple) !important; }

/* ===========================================================
   TITLE / RANK PROGRESS TRACKER
   Achieved = GOLD, In-progress = LAVENDER, Pending = grey
   =========================================================== */
.tt-circle.done {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-deep)) !important;
  border: 2px solid var(--gold) !important;
  color: #5a3c00 !important;
  box-shadow: 0 0 0 3px #FFF1CE !important;
}
.tt-line.done { background: var(--gold) !important; }
.tt-name.done { color: var(--gold-deep) !important; }

.tt-circle.active {
  background: linear-gradient(135deg, var(--brand-lavender), var(--brand-purple)) !important;
  border: 2px solid var(--brand-lavender) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px var(--purple-100) !important;
  animation: tt-pulse-u 2s infinite !important;
}
@keyframes tt-pulse-u { 0%,100%{box-shadow:0 0 0 3px var(--purple-100)} 50%{box-shadow:0 0 0 5px var(--purple-50)} }
.tt-line.active {
  background: linear-gradient(90deg, var(--gold) 0%, var(--brand-lavender) 60%, var(--brand-purple) 100%) !important;
}
.tt-name.active { color: var(--brand-purple) !important; }
.tt-status.active { color: var(--brand-lavender) !important; }

/* PSV gradient bar -> purple */
.tt-bar-fill { background: linear-gradient(90deg, var(--brand-purple) 0%, var(--brand-lavender) 100%) !important; }
.tt-bar-meta { color: var(--brand-purple) !important; }

/* progress fills already purple via var swap; soften track */
.progress-track, .tt-bar-track { background: var(--surface-3) !important; }

/* rank badge chips on soft purple */
.rank-badge { background: var(--purple-50) !important; color: var(--brand-purple) !important; }

/* ---- Sidebar sub-menu links: black, no underline, correct links ---- */
.nav-sub, .nav-sub a, .ns, .ns a {
  color: var(--ink-900) !important;
  text-decoration: none !important;
}
.nav-sub:hover, .nav-sub a:hover, .ns:hover, .ns a:hover { color: var(--brand-purple) !important; }
.nav-sub.active-sub, .nav-sub.active-sub a, .ns.active-sub, .ns.active-sub a {
  color: var(--brand-purple) !important; font-weight: 700;
}