/* ═══════════════════════════════════════════════════════════════════════════
   🎨 KOLOPLUS THEME V2 — Gray + Yellow/Cyan Edition
   ═══════════════════════════════════════════════════════════════════════════
   Світла тема: Ultimate Gray (#939597) + Cyan (#5CC8D7)
   Темна тема:  Dark Gray (#1a1a1a) + Illuminating Yellow (#F5DF4D)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   🌙 ТЕМНА ТЕМА V2 — Yellow/Gold Accents
   ═══════════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="dark"] {
  /* ── Primary Colors (Yellow/Gold) ── */
  --k-primary: var(--k-yellow);              /* Illuminating Yellow */
  --k-primary-light: var(--k-yellow-light);
  --k-primary-dark: var(--k-yellow-dark);
  --k-primary-glow: rgba(245, 223, 77, 0.5);
  --k-primary-soft: rgba(245, 223, 77, 0.15);

  /* ── Background (Ultimate Gray tones) ── */
  --k-bg-darkest: #0d0d0d;
  --k-bg-darker: #141414;
  --k-bg-dark: #1a1a1a;              /* Main background */
  --k-bg-base: #202020;
  --k-bg-elevated: #2a2a2a;
  --k-bg-card: #333333;
  --k-bg-hover: #3d3d3d;
  --k-bg-active: #474747;

  /* ── Text ── */
  --k-text-primary: #f5f5f5;
  --k-text-secondary: #a3a3a3;
  --k-text-muted: #737373;           /* Ultimate Gray lighter */
  --k-text-disabled: #525252;
  --k-text-inverse: #171717;

  /* ── Borders ── */
  --k-border-subtle: rgba(245, 223, 77, 0.08);
  --k-border-default: rgba(245, 223, 77, 0.15);
  --k-border-strong: rgba(245, 223, 77, 0.25);
  --k-border-accent: rgba(245, 223, 77, 0.4);

  /* ── Glass ── */
  --k-glass-bg: rgba(42, 42, 42, 0.8);
  --k-glass-bg-light: rgba(42, 42, 42, 0.5);
  --k-glass-bg-strong: rgba(42, 42, 42, 0.95);
  --k-glass-border: rgba(245, 223, 77, 0.2);

  /* ── Gradients ── */
  --k-gradient-primary: linear-gradient(135deg, #F5DF4D 0%, #FBBF24 100%);
  --k-gradient-dark: linear-gradient(180deg, #141414 0%, #1a1a1a 100%);
  --k-gradient-card: linear-gradient(145deg, rgba(51, 51, 51, 0.9) 0%, rgba(42, 42, 42, 0.95) 100%);

  /* ── Shadows ── */
  --k-shadow-glow: 0 0 30px rgba(245, 223, 77, 0.4);
  --k-shadow-glow-sm: 0 0 15px rgba(245, 223, 77, 0.3);
  --k-shadow-glow-lg: 0 0 50px rgba(245, 223, 77, 0.5);

  /* ── Secondary (keep cyan for contrast) ── */
  --k-secondary: var(--k-cyan);
  --k-secondary-light: var(--k-cyan-light);
  --k-secondary-dark: var(--k-cyan-dark);
  --k-secondary-glow: rgba(34, 211, 238, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ☀️ СВІТЛА ТЕМА V2 — Cyan/Blue Accents on Gray
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  /* ── Primary Colors (Cyan/Turquoise) ── */
  --k-primary: #5CC8D7;              /* Cyan/Turquoise */
  --k-primary-light: #87CEEB;        /* Sky Blue */
  --k-primary-dark: #48B0BD;
  --k-primary-glow: rgba(92, 200, 215, 0.5);
  --k-primary-soft: rgba(92, 200, 215, 0.15);

  /* ── Background (Gray tones) ── */
  --k-bg-darkest: #ffffff;
  --k-bg-darker: #f8f9fa;
  --k-bg-dark: #f1f3f5;
  --k-bg-base: #e9ecef;
  --k-bg-elevated: #ffffff;
  --k-bg-card: #ffffff;
  --k-bg-hover: #f8f9fa;
  --k-bg-active: #e9ecef;

  /* ── Text ── */
  --k-text-primary: #212529;
  --k-text-secondary: #495057;
  --k-text-muted: #939597;           /* Ultimate Gray - Pantone 17-5104 */
  --k-text-disabled: #adb5bd;
  --k-text-inverse: #f8f9fa;

  /* ── Borders ── */
  --k-border-subtle: rgba(92, 200, 215, 0.1);
  --k-border-default: rgba(92, 200, 215, 0.2);
  --k-border-strong: rgba(92, 200, 215, 0.35);
  --k-border-accent: rgba(92, 200, 215, 0.5);

  /* ── Glass ── */
  --k-glass-bg: rgba(255, 255, 255, 0.9);
  --k-glass-bg-light: rgba(255, 255, 255, 0.7);
  --k-glass-bg-strong: rgba(255, 255, 255, 0.98);
  --k-glass-border: rgba(92, 200, 215, 0.3);

  /* ── Gradients ── */
  --k-gradient-primary: linear-gradient(135deg, #5CC8D7 0%, #87CEEB 100%);
  --k-gradient-dark: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
  --k-gradient-card: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 249, 250, 0.95) 100%);

  /* ── Shadows (softer for light theme) ── */
  --k-shadow-xs: 0 1px 2px rgba(92, 200, 215, 0.08);
  --k-shadow-sm: 0 2px 4px rgba(92, 200, 215, 0.1);
  --k-shadow-md: 0 4px 8px rgba(92, 200, 215, 0.12);
  --k-shadow-lg: 0 8px 16px rgba(92, 200, 215, 0.15);
  --k-shadow-xl: 0 16px 32px rgba(92, 200, 215, 0.18);
  --k-shadow-glow: 0 0 30px rgba(92, 200, 215, 0.35);
  --k-shadow-glow-sm: 0 0 15px rgba(92, 200, 215, 0.25);
  --k-shadow-glow-lg: 0 0 50px rgba(92, 200, 215, 0.45);

  /* ── Secondary (gold/yellow for contrast) ── */
  --k-secondary: var(--k-primary);
  --k-secondary-light: var(--k-yellow-light);
  --k-secondary-dark: var(--k-yellow-dark);
  --k-secondary-glow: rgba(245, 223, 77, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🎖️ TIER COLORS — Medal/Achievement Tiers
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --tier-wood: #8B6914;
  --tier-bronze: #CD7F32;
  --tier-silver: #C0C0C0;
  --tier-gold: #FFD700;
  --tier-platinum: #E5E4E2;
  --tier-diamond: #B9F2FF;
  --tier-legendary: #FF4500;

  /* Soft backgrounds */
  --tier-wood-soft: rgba(139, 105, 20, 0.15);
  --tier-bronze-soft: rgba(205, 127, 50, 0.15);
  --tier-silver-soft: rgba(192, 192, 192, 0.15);
  --tier-gold-soft: rgba(255, 215, 0, 0.15);
  --tier-platinum-soft: rgba(229, 228, 226, 0.15);
  --tier-diamond-soft: rgba(185, 242, 255, 0.15);
  --tier-legendary-soft: rgba(255, 69, 0, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   📊 UTILITY CLASSES — Replace inline styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Table Styles ── */
.kp-table__th {
  padding: 10px 8px;
  text-align: left;
  font-size: var(--k-text-xs);
  font-weight: var(--k-weight-bold);
  color: var(--k-text-muted);
  border-bottom: 1px solid var(--k-border-subtle);
}
.kp-table__th--right { text-align: right; }
.kp-table__th--center { text-align: center; }

.kp-table__td {
  padding: 10px 8px;
  font-size: var(--k-text-sm);
  color: var(--k-text-secondary);
  border-bottom: 1px solid var(--k-border-subtle);
}
.kp-table__td--right { text-align: right; }
.kp-table__td--bold { font-weight: var(--k-weight-bold); color: var(--k-text-primary); }
.kp-table__td--primary { color: var(--k-text-primary); font-weight: var(--k-weight-extrabold); }

.kp-table__row {
  border-bottom: 1px solid var(--k-border-subtle);
  transition: background var(--k-duration-fast);
}
.kp-table__row:hover { background: var(--k-bg-hover); }

/* ── Rank Badges ── */
.kp-rank { font-weight: var(--k-weight-extrabold); }
.kp-rank--top { color: var(--k-text-primary); }
.kp-rank--normal { color: var(--k-text-muted); }

/* ── Text Colors ── */
.kp-text-primary { color: var(--k-text-primary); }
.kp-text-secondary { color: var(--k-text-secondary); }
.kp-text-muted { color: var(--k-text-muted); }
.kp-text-success { color: var(--k-green); }
.kp-text-warning { color: var(--k-yellow); }
.kp-text-danger { color: var(--k-red); }
.kp-text-gold { color: var(--k-yellow); font-weight: var(--k-weight-bold); }
.kp-text-glory { color: var(--k-yellow-light); font-weight: var(--k-weight-bold); }

/* ── Tier Badges ── */
.tier-wood { color: var(--tier-wood); border-color: var(--tier-wood); }
.tier-bronze { color: var(--tier-bronze); border-color: var(--tier-bronze); }
.tier-silver { color: var(--tier-silver); border-color: var(--tier-silver); }
.tier-gold { color: var(--tier-gold); border-color: var(--tier-gold); }
.tier-platinum { color: var(--tier-platinum); border-color: var(--tier-platinum); }
.tier-diamond { color: var(--tier-diamond); border-color: var(--tier-diamond); }
.tier-legendary { color: var(--tier-legendary); border-color: var(--tier-legendary); }

/* Tier badge component */
.kp-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--k-radius-sm);
  font-size: var(--k-text-xs);
  font-weight: var(--k-weight-bold);
  background: var(--_tier-soft, var(--k-bg-elevated));
  border: 1px solid var(--_tier-color, var(--k-border-default));
  color: var(--_tier-color, var(--k-text-secondary));
}
.kp-tier-badge--wood { --_tier-color: var(--tier-wood); --_tier-soft: var(--tier-wood-soft); }
.kp-tier-badge--bronze { --_tier-color: var(--tier-bronze); --_tier-soft: var(--tier-bronze-soft); }
.kp-tier-badge--silver { --_tier-color: var(--tier-silver); --_tier-soft: var(--tier-silver-soft); }
.kp-tier-badge--gold { --_tier-color: var(--tier-gold); --_tier-soft: var(--tier-gold-soft); }
.kp-tier-badge--platinum { --_tier-color: var(--tier-platinum); --_tier-soft: var(--tier-platinum-soft); }
.kp-tier-badge--diamond { --_tier-color: var(--tier-diamond); --_tier-soft: var(--tier-diamond-soft); }
.kp-tier-badge--legendary { --_tier-color: var(--tier-legendary); --_tier-soft: var(--tier-legendary-soft); }

/* ── Trophy Card ── */
.kp-trophy-card {
  padding: 13px 14px;
  background: var(--k-bg-elevated);
  border: 1px solid var(--k-border-subtle);
  border-radius: var(--k-radius-lg);
}
.kp-trophy-card__title {
  font-size: var(--k-text-sm);
  font-weight: var(--k-weight-extrabold);
  color: var(--k-text-primary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kp-trophy-card__rank {
  font-size: var(--k-text-xs);
  background: var(--k-bg-hover);
  padding: 1px 7px;
  border-radius: var(--k-radius-sm);
  color: var(--k-text-muted);
  font-weight: var(--k-weight-bold);
}
.kp-trophy-card__desc {
  font-size: var(--k-text-xs);
  color: var(--k-text-muted);
  margin-bottom: 6px;
  line-height: 1.4;
}
.kp-trophy-card__bonus {
  font-size: var(--k-text-xs);
  color: var(--k-green);
  font-weight: var(--k-weight-bold);
}
.kp-trophy-card__glory {
  color: var(--k-yellow);
}

/* ── User Link ── */
.kp-user-link {
  font-size: var(--k-text-sm);
  font-weight: var(--k-weight-bold);
  color: var(--k-text-primary);
  text-decoration: none;
  transition: color var(--k-duration-fast);
}
.kp-user-link:hover { color: var(--k-primary); }

/* ── Form Labels ── */
.kp-form-label {
  font-size: var(--k-text-xs);
  color: var(--k-text-muted);
  margin-bottom: 8px;
  font-weight: var(--k-weight-bold);
}

/* ── Empty State ── */
.kp-empty-row {
  padding: 24px 8px;
  text-align: center;
  color: var(--k-text-muted);
  font-style: italic;
}

/* ── Info Text ── */
.kp-hint {
  font-size: var(--k-text-xs);
  color: var(--k-text-muted);
  margin-top: 8px;
}

/* ── Flex Row ── */
.kp-flex { display: flex; }
.kp-flex--center { align-items: center; }
.kp-flex--wrap { flex-wrap: wrap; }
.kp-gap-2 { gap: 8px; }
.kp-gap-3 { gap: 12px; }

/* ── Medal Badge (Dashboard) ── */
.kp-medal-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.kp-medal-badge__icon {
  font-size: 24px;
  padding: 8px;
  border-radius: var(--k-radius-lg);
  border: 2px solid;
  background: var(--k-bg-elevated);
}
.kp-medal-badge__tier {
  font-size: var(--k-text-xs);
  font-weight: var(--k-weight-semibold);
}

/* ── Balance Display ── */
.kp-balance {
  font-size: var(--k-text-sm);
  color: var(--k-yellow);
  font-weight: var(--k-weight-extrabold);
}

/* ── Grid Helpers ── */
.kp-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ── Stack ── */
.kp-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   🔧 ADDITIONAL UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Text Sizes ── */
.kp-text-xs { font-size: var(--k-text-xs); }
.kp-text-sm { font-size: var(--k-text-sm); }
.kp-text-base { font-size: var(--k-text-base); }
.kp-text-lg { font-size: var(--k-text-lg); }
.kp-text-xl { font-size: var(--k-text-xl); }

/* ── Font Weights ── */
.kp-font-normal { font-weight: var(--k-weight-normal); }
.kp-font-medium { font-weight: var(--k-weight-medium); }
.kp-font-semibold { font-weight: var(--k-weight-semibold); }
.kp-font-bold { font-weight: var(--k-weight-bold); }
.kp-font-extrabold { font-weight: var(--k-weight-extrabold); }

/* ── Margins ── */
.kp-mb-2 { margin-bottom: var(--k-space-2); }
.kp-mb-3 { margin-bottom: var(--k-space-3); }
.kp-mb-4 { margin-bottom: var(--k-space-4); }
.kp-mb-6 { margin-bottom: var(--k-space-6); }
.kp-mt-2 { margin-top: var(--k-space-2); }
.kp-mt-3 { margin-top: var(--k-space-3); }
.kp-mt-4 { margin-top: var(--k-space-4); }
.kp-mt-6 { margin-top: var(--k-space-6); }

/* ── Paddings ── */
.kp-p-2 { padding: var(--k-space-2); }
.kp-p-3 { padding: var(--k-space-3); }
.kp-p-4 { padding: var(--k-space-4); }
.kp-p-6 { padding: var(--k-space-6); }

/* ── Flex Utilities ── */
.kp-flex { display: flex; }
.kp-flex--center { align-items: center; }
.kp-flex--wrap { flex-wrap: wrap; }
.kp-flex--between { justify-content: space-between; }
.kp-flex--column { flex-direction: column; }
.kp-flex-1 { flex: 1; }
.kp-gap-1 { gap: var(--k-space-1); }
.kp-gap-2 { gap: var(--k-space-2); }
.kp-gap-3 { gap: var(--k-space-3); }
.kp-gap-4 { gap: var(--k-space-4); }

/* ── Stack (Vertical Flex) ── */
.kp-stack { display: flex; flex-direction: column; gap: var(--k-space-3); }
.kp-stack-sm { display: flex; flex-direction: column; gap: var(--k-space-2); }

/* ── Grid ── */
.kp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-space-3); }
.kp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--k-space-3); }

/* ── Display ── */
.kp-block { display: block; }

/* ── Section Helpers ── */
.kp-section-title {
  margin-bottom: var(--k-space-4);
  font-size: var(--k-text-sm);
  font-weight: var(--k-weight-bold);
  color: var(--k-text-muted);
}
.kp-section-label {
  font-size: var(--k-text-xs);
  font-weight: var(--k-weight-bold);
  color: var(--k-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--k-space-2);
}
.kp-section-divider {
  margin-top: var(--k-space-5);
  padding-top: var(--k-space-4);
  border-top: 1px solid var(--k-border-subtle);
}

/* ── Arena Status Item Purple Variant ── */
.arena-status-item--purple {
  border-color: var(--k-secondary-glow);
}

/* ── Tier Border Classes ── */
.kp-tier-border { border-width: 2px; border-style: solid; }
.kp-tier-border.tier-wood { border-color: var(--tier-wood); }
.kp-tier-border.tier-bronze { border-color: var(--tier-bronze); }
.kp-tier-border.tier-silver { border-color: var(--tier-silver); }
.kp-tier-border.tier-gold { border-color: var(--tier-gold); }
.kp-tier-border.tier-platinum { border-color: var(--tier-platinum); }
.kp-tier-border.tier-diamond { border-color: var(--tier-diamond); }
.kp-tier-border.tier-legendary { border-color: var(--tier-legendary); }

/* ── Balance & Gold Text ── */
.kp-balance {
  font-size: var(--k-text-sm);
  font-weight: var(--k-weight-extrabold);
  color: var(--k-yellow);
}

/* ── Form Label ── */
.kp-form-label {
  display: block;
  font-size: var(--k-text-xs);
  font-weight: var(--k-weight-bold);
  color: var(--k-text-muted);
  margin-bottom: var(--k-space-2);
}

/* ARENA MATCH & BATTLE COLORS */
.kp-link-primary { color: var(--k-primary); font-weight: 700; text-decoration: none; }
.kp-link-info { color: #93c5fd; text-decoration: none; }
.kp-link-attacker { color: #ff6b81; text-decoration: none; }
.kp-link-defender { color: #64b5f6; text-decoration: none; }
.kp-link-winner { color: var(--k-green); font-weight: 800; text-decoration: none; }
.kp-text-attacker { color: #ff6b81; }
.kp-text-defender { color: #64b5f6; }
.kp-text-draw { color: var(--k-yellow-light); }
.kp-badge { display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: 5px; font-weight: 900; margin-left: 2px; }
.kp-badge--danger { background: rgba(239,68,68,.8); color: #fff; }
.arena-status-item--prestige { border-color: rgba(168,85,247,.25); }
.kp-prize-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.04); }