/**
 * design-system.css
 * Reusable component classes for esports.info.bd
 * All colors/shadows reference tokens defined in style.css (:root)
 * Load AFTER style.css and tailwind.generated.css
 */

/* ═══════════════════════════════════════════════════
   TRANSITIONS — apply to all interactive elements
   ═══════════════════════════════════════════════════ */
.ds-card,
.ds-btn,
.ds-badge,
.ds-avatar,
.ds-stat,
.ds-nav-link,
.ds-dropdown-item {
  transition: all var(--trans-base, 200ms cubic-bezier(0.4, 0, 0.2, 1));
}

/* ═══════════════════════════════════════════════════
   CARD — glass surface with optional accent glow
   ═══════════════════════════════════════════════════
   Usage: <div class="ds-card">…</div>
   Modifiers: ds-card--glow-blue, ds-card--glow-violet, ds-card--glow-green
              ds-card--flat (no backdrop blur, for nested cards)
              ds-card--interactive (adds hover lift)
   ═══════════════════════════════════════════════════ */
.ds-card {
  background: var(--glass-bg, rgba(14, 11, 9, 0.75));
  border: 1px solid var(--glass-border, rgba(var(--brand-primary-rgb), 0.18));
  backdrop-filter: var(--glass-blur, blur(16px) saturate(1.8));
  -webkit-backdrop-filter: var(--glass-blur, blur(16px) saturate(1.8));
  border-radius: var(--radius-lg, 0px);
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
}

.ds-card--interactive:hover {
  border-color: var(--border-bright, rgba(var(--brand-primary-rgb), 0.45));
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(var(--shadow-color), 0.4), 0 0 0 1px var(--border-bright, rgba(var(--brand-primary-rgb), 0.3));
}

.ds-card--flat {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--bg-card, #1c1712);
}

.ds-card--glow-blue::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top left, var(--accent-blue-glow, rgba(var(--brand-primary-rgb),0.12)) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.ds-card--glow-violet::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top left, var(--accent-violet-glow, rgba(var(--brand-secondary-rgb),0.12)) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.ds-card--glow-green::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top left, rgba(var(--st-success-rgb),0.1) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.ds-card > * { position: relative; z-index: 1; }

.ds-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle, rgba(var(--neutral-500-rgb),0.1));
  flex-wrap: wrap;
}

.ds-card__title {
  font-family: var(--font-display, 'Rajdhani', sans-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, var(--text-primary));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ds-card__title i {
  color: var(--accent-blue, var(--brand-primary));
  font-size: 0.85em;
}

/* ═══════════════════════════════════════════════════
   BADGE — status, role, and label chips
   ═══════════════════════════════════════════════════
   Usage: <span class="ds-badge ds-badge--green">Live</span>
   Sizes: ds-badge--sm, ds-badge--lg
   ═══════════════════════════════════════════════════ */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.6em;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-sm, 0px);
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.4;
}

.ds-badge--sm { font-size: 0.62rem; padding: 0.15em 0.45em; }
.ds-badge--lg { font-size: 0.82rem; padding: 0.3em 0.8em; }

/* Color variants */
.ds-badge--blue   { background: var(--st-info-bg);    color: var(--st-info);    border-color: var(--st-info-brd); }
.ds-badge--green  { background: var(--st-success-bg); color: var(--st-success); border-color: var(--st-success-brd); }
.ds-badge--red    { background: var(--st-error-bg);   color: var(--st-error);   border-color: var(--st-error-brd); }
.ds-badge--amber  { background: var(--st-warning-bg); color: var(--st-warning); border-color: var(--st-warning-brd); }
.ds-badge--slate  { background: var(--bd-slate-bg);   color: var(--bd-slate);   border-color: var(--bd-slate-brd); }
.ds-badge--violet { background: var(--bd-cyan-bg);    color: var(--bd-cyan);    border-color: var(--bd-cyan-brd); }

/* Tournament status shorthands */
.ds-badge--live         { background: var(--st-success-bg); color: var(--status-live);   border-color: var(--st-success-brd); }
.ds-badge--registration { background: rgba(var(--brand-secondary-rgb),0.12);  color: var(--status-open);   border-color: rgba(var(--brand-secondary-rgb),0.3); }
.ds-badge--checkin      { background: var(--st-warning-bg); color: var(--status-checkin); border-color: var(--st-warning-brd); }
.ds-badge--upcoming     { background: var(--st-info-bg);    color: var(--status-upcoming); border-color: var(--st-info-brd); }
.ds-badge--completed    { background: var(--bd-slate-bg);   color: var(--status-ended);   border-color: var(--bd-slate-brd); }
.ds-badge--cancelled    { background: var(--st-error-bg);   color: var(--status-cancelled); border-color: var(--st-error-brd); }

/* Live pulse dot */
.ds-badge--live::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status-live);
  animation: ds-pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes ds-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* ═══════════════════════════════════════════════════
   BUTTON — primary action buttons
   ═══════════════════════════════════════════════════ */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-sm, 0px);
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}

.ds-btn:hover  { transform: translateY(-1px); }
.ds-btn:active { transform: translateY(0); }

.ds-btn--primary {
  background: var(--gradient-primary, linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary)));
  color: var(--neutral-0);
  box-shadow: 0 4px 14px var(--accent-blue-glow, rgba(var(--brand-primary-rgb),0.25));
}
.ds-btn--primary:hover {
  box-shadow: 0 6px 20px var(--accent-blue-glow, rgba(var(--brand-primary-rgb),0.4));
}

.ds-btn--secondary {
  background: transparent;
  color: var(--text-secondary, var(--text-secondary));
  border-color: var(--border-default, rgba(99,130,190,0.2));
}
.ds-btn--secondary:hover {
  border-color: var(--border-bright, rgba(var(--brand-primary-rgb),0.45));
  color: var(--text-primary, var(--text-primary));
  background: var(--st-info-bg, rgba(var(--brand-primary-rgb),0.1));
}

.ds-btn--danger {
  background: var(--st-error-bg, rgba(var(--legacy-red-500-rgb),0.1));
  color: var(--st-error, var(--legacy-red-500));
  border-color: var(--st-error-brd, rgba(var(--legacy-red-500-rgb),0.35));
}
.ds-btn--danger:hover {
  background: rgba(var(--legacy-red-500-rgb),0.18);
  box-shadow: 0 4px 14px rgba(var(--legacy-red-500-rgb),0.2);
}

.ds-btn--sm { font-size: 0.72rem; padding: 0.35rem 0.75rem; }
.ds-btn--lg { font-size: 0.9rem; padding: 0.65rem 1.4rem; }

/* Icon-only button */
.ds-btn--icon {
  padding: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
}

/* ═══════════════════════════════════════════════════
   AVATAR — user/team image with fallback initials
   ═══════════════════════════════════════════════════ */
.ds-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 0px);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-elevated, #2a2119);
  border: 1px solid var(--border-subtle, rgba(var(--neutral-500-rgb),0.1));
  font-family: var(--font-display, 'Rajdhani', sans-serif);
  font-weight: 700;
  color: var(--text-secondary, var(--text-secondary));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
}

.ds-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.ds-avatar--xs { width: 1.5rem;  height: 1.5rem;  font-size: 0.55rem; }
.ds-avatar--sm { width: 2rem;    height: 2rem;    font-size: 0.65rem; }
.ds-avatar--md { width: 2.5rem;  height: 2.5rem;  font-size: 0.75rem; }
.ds-avatar--lg { width: 3.5rem;  height: 3.5rem;  font-size: 1rem; }
.ds-avatar--xl { width: 5rem;    height: 5rem;    font-size: 1.4rem; }

.ds-avatar--circle { border-radius: 50%; }

.ds-avatar--blue   { background: var(--st-info-bg);    color: var(--accent-blue);   border-color: var(--st-info-brd); }
.ds-avatar--violet { background: var(--bd-cyan-bg);    color: var(--bd-cyan);       border-color: var(--bd-cyan-brd); }
.ds-avatar--green  { background: var(--st-success-bg); color: var(--st-success);    border-color: var(--st-success-brd); }
.ds-avatar--amber  { background: var(--st-warning-bg); color: var(--st-warning);    border-color: var(--st-warning-brd); }

/* ═══════════════════════════════════════════════════
   STAT BLOCK — metric + label + optional trend
   ═══════════════════════════════════════════════════ */
.ds-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
}

.ds-stat__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, var(--text-muted));
}

.ds-stat__value {
  font-family: var(--font-display, 'Rajdhani', sans-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary, var(--text-primary));
  line-height: 1;
}

.ds-stat__value--lg { font-size: 2.75rem; }
.ds-stat__value--sm { font-size: 1.4rem; }

.ds-stat__trend {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font-size: 0.72rem;
  font-weight: 600;
}

.ds-stat__trend--up   { color: var(--st-success, var(--status-live)); }
.ds-stat__trend--down { color: var(--st-error, var(--legacy-red-500)); }
.ds-stat__trend--flat { color: var(--text-muted, var(--text-muted)); }

/* Count-up animation (trigger by adding .ds-count-up class + data-target attr) */
@keyframes ds-count-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ds-stat__value.is-counting {
  animation: ds-count-up 0.4s ease-out forwards;
}

/* ═══════════════════════════════════════════════════
   EMPTY STATE — no-data placeholder
   ═══════════════════════════════════════════════════ */
.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  gap: 1rem;
}

.ds-empty__icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-md, 0px);
  background: var(--bg-elevated, #2a2119);
  border: 1px solid var(--border-subtle, rgba(var(--neutral-500-rgb),0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--text-muted, var(--text-muted));
  margin-bottom: 0.25rem;
}

.ds-empty__title {
  font-family: var(--font-display, 'Rajdhani', sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary, var(--text-primary));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ds-empty__desc {
  font-size: 0.82rem;
  color: var(--text-muted, var(--text-muted));
  max-width: 28rem;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════
   DIVIDER
   ═══════════════════════════════════════════════════ */
.ds-divider {
  border: none;
  border-top: 1px solid var(--border-subtle, rgba(var(--neutral-500-rgb),0.1));
  margin: 1rem 0;
}

.ds-divider--bright {
  border-top-color: var(--border-default, rgba(99,130,190,0.2));
}

/* ═══════════════════════════════════════════════════
   PAGE ANIMATIONS — enter transitions for panels
   ═══════════════════════════════════════════════════ */
@keyframes ds-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ds-fade-in-fast {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ds-animate-in {
  animation: ds-fade-in 0.25s ease-out both;
}

/* Staggered children animation */
.ds-stagger > * {
  animation: ds-fade-in 0.25s ease-out both;
}
.ds-stagger > *:nth-child(1) { animation-delay: 0ms; }
.ds-stagger > *:nth-child(2) { animation-delay: 40ms; }
.ds-stagger > *:nth-child(3) { animation-delay: 80ms; }
.ds-stagger > *:nth-child(4) { animation-delay: 120ms; }
.ds-stagger > *:nth-child(5) { animation-delay: 160ms; }
.ds-stagger > *:nth-child(6) { animation-delay: 200ms; }
.ds-stagger > *:nth-child(7) { animation-delay: 240ms; }
.ds-stagger > *:nth-child(8) { animation-delay: 280ms; }

/* ═══════════════════════════════════════════════════
   DASHBOARD — hook animations onto existing db-* classes
   No template changes needed; purely additive.
   ═══════════════════════════════════════════════════ */

/* Stat cards inside any db-grid fade in staggered */
.db-grid-4 > .db-stat-card,
.db-grid-3 > .db-stat-card {
  animation: ds-fade-in 0.28s ease-out both;
}

.db-grid-4 > .db-stat-card:nth-child(1),
.db-grid-3 > .db-stat-card:nth-child(1) { animation-delay: 0ms; }
.db-grid-4 > .db-stat-card:nth-child(2),
.db-grid-3 > .db-stat-card:nth-child(2) { animation-delay: 50ms; }
.db-grid-4 > .db-stat-card:nth-child(3),
.db-grid-3 > .db-stat-card:nth-child(3) { animation-delay: 100ms; }
.db-grid-4 > .db-stat-card:nth-child(4),
.db-grid-3 > .db-stat-card:nth-child(4) { animation-delay: 150ms; }
.db-grid-4 > .db-stat-card:nth-child(5) { animation-delay: 200ms; }
.db-grid-4 > .db-stat-card:nth-child(6) { animation-delay: 250ms; }
.db-grid-4 > .db-stat-card:nth-child(7) { animation-delay: 300ms; }
.db-grid-4 > .db-stat-card:nth-child(8) { animation-delay: 350ms; }

/* Action cards in db-grid-auto */
.db-grid-auto > .db-action-card {
  animation: ds-fade-in 0.28s ease-out both;
}
.db-grid-auto > .db-action-card:nth-child(1) { animation-delay: 80ms; }
.db-grid-auto > .db-action-card:nth-child(2) { animation-delay: 120ms; }
.db-grid-auto > .db-action-card:nth-child(3) { animation-delay: 160ms; }
.db-grid-auto > .db-action-card:nth-child(4) { animation-delay: 200ms; }
.db-grid-auto > .db-action-card:nth-child(5) { animation-delay: 240ms; }
.db-grid-auto > .db-action-card:nth-child(6) { animation-delay: 280ms; }
.db-grid-auto > .db-action-card:nth-child(7) { animation-delay: 320ms; }
.db-grid-auto > .db-action-card:nth-child(8) { animation-delay: 360ms; }

/* db-card blocks slide in */
.db-panel > .db-card {
  animation: ds-fade-in 0.3s ease-out both;
}

/* Upgrade empty-box to match ds-empty aesthetics */
.empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
  gap: 0.75rem;
  color: var(--text-muted, var(--text-muted));
}

.empty-box i {
  font-size: 2rem;
  opacity: 0.4;
  margin-bottom: 0.25rem;
}

.empty-box p {
  font-size: 0.82rem;
  color: var(--text-muted, var(--text-muted));
  margin: 0;
}

/* Tournament card hover lift (if not already in components.css) */
.tournament-card,
.t-card {
  transition: transform var(--trans-base, 200ms cubic-bezier(0.4,0,0.2,1)),
              box-shadow var(--trans-base, 200ms cubic-bezier(0.4,0,0.2,1)),
              border-color var(--trans-base, 200ms cubic-bezier(0.4,0,0.2,1));
}

.tournament-card:hover,
.t-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-bright, rgba(var(--brand-primary-rgb),0.45));
}

/* ═══════════════════════════════════════════════════
   GLASS INPUT — consistent form inputs
   ═══════════════════════════════════════════════════ */
.ds-input {
  width: 100%;
  background: var(--bg-inset, #0a0806);
  border: 1px solid var(--border-subtle, rgba(var(--neutral-500-rgb),0.1));
  border-radius: var(--radius-sm, 0px);
  color: var(--text-primary, var(--text-primary));
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  outline: none;
  transition: border-color var(--trans-fast, 150ms ease);
}

.ds-input::placeholder { color: var(--text-muted, var(--text-muted)); }

.ds-input:focus {
  border-color: var(--accent-blue, var(--brand-primary));
  box-shadow: 0 0 0 2px var(--accent-blue-glow, rgba(var(--brand-primary-rgb),0.15));
}

/* ═══════════════════════════════════════════════════
   NAV LINK — sidebar / tab navigation item
   ═══════════════════════════════════════════════════ */
.ds-nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm, 0px);
  color: var(--text-muted, var(--text-muted));
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}

.ds-nav-link:hover {
  background: var(--sidebar-hover-bg, rgba(var(--brand-primary-rgb),0.08));
  color: var(--text-primary, var(--text-primary));
}

.ds-nav-link.is-active {
  background: var(--sidebar-active-bg, rgba(var(--brand-primary-rgb),0.15));
  color: var(--accent-blue, var(--brand-primary));
  border-left: 2px solid var(--accent-blue, var(--brand-primary));
}

.ds-nav-link i {
  width: 1rem;
  text-align: center;
  flex-shrink: 0;
  font-size: 0.8em;
}

/* ═══════════════════════════════════════════════════
   ACCENT LINE — colored top border on cards
   ═══════════════════════════════════════════════════ */
.ds-card--accent-blue   { border-top: 2px solid var(--accent-blue, var(--brand-primary)); }
.ds-card--accent-violet { border-top: 2px solid var(--accent-violet, var(--brand-secondary)); }
.ds-card--accent-green  { border-top: 2px solid var(--st-success, var(--status-live)); }
.ds-card--accent-amber  { border-top: 2px solid var(--st-warning, var(--st-warning)); }
.ds-card--accent-red    { border-top: 2px solid var(--st-error, var(--legacy-red-500)); }

/* ═══════════════════════════════════════════════════
   RESPONSIVE HELPERS
   ═══════════════════════════════════════════════════ */
.ds-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

/* Touch-scrollable bracket wrapper */
.ds-bracket-scroll {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
  padding-bottom: 0.5rem;
}

.ds-bracket-scroll:active { cursor: grabbing; }

/* Clamp fluid typography */
.ds-text-fluid-sm   { font-size: clamp(0.75rem, 1.5vw, 0.875rem); }
.ds-text-fluid-base { font-size: clamp(0.875rem, 2vw, 1rem); }
.ds-text-fluid-lg   { font-size: clamp(1rem, 2.5vw, 1.25rem); }
.ds-text-fluid-xl   { font-size: clamp(1.25rem, 3vw, 1.75rem); }
.ds-text-fluid-2xl  { font-size: clamp(1.5rem, 4vw, 2.25rem); }
.ds-text-fluid-3xl  { font-size: clamp(1.75rem, 5vw, 3rem); }

/* Mobile filter bar — wraps and scrolls instead of overflowing */
@media (max-width: 640px) {
  .ds-filter-bar {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .ds-filter-bar::-webkit-scrollbar { display: none; }
}