/*
 * VideoCoach — Theme System
 * 6 motywów: Classic / Gradient / Glass × Dark / Light
 * Użycie: <html data-theme="classic-dark"> (domyślny)
 * Plik: /wp-content/uploads/videocoach/css/vc-themes.css
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* ═══════════════════════════════════════════════════
   CLASSIC DARK (domyślny)
   Zielony akcent na czarnym tle
═══════════════════════════════════════════════════ */
:root,
[data-theme="classic-dark"] {
  --bg:          #09080F;
  --bg2:         #0D0C16;
  --surface:     #12151c;
  --surface2:    #1a1e28;
  --border:      rgba(255,255,255,0.07);
  --border2:     rgba(255,255,255,0.13);
  --text:        #f0f2f7;
  --text2:       #9ca3af;
  --muted:       #4b5563;

  --accent:      #00e5a0;
  --accent2:     #00c48a;
  --accent-dim:  rgba(0,229,160,0.12);
  --accent-text: #0a0c10;

  --pro:         #7c5cfc;
  --danger:      #ff4757;
  --warning:     #ffa502;
  --success:     #00e5a0;

  /* Hero — brak gradientu w classic */
  --hero-bg:     var(--bg);
  --hero-text:   var(--text);
  --hero-sub:    var(--text2);
  --hero-btn-bg: var(--accent);
  --hero-btn-text: var(--accent-text);

  /* Nav */
  --nav-bg:      var(--bg2);
  --nav-border:  var(--border);
  --nav-active:  var(--accent);
  --nav-inactive: rgba(255,255,255,0.3);

  /* Cards */
  --card-bg:     var(--surface);
  --card-border: var(--border);
  --card-val:    var(--accent);

  /* Sidebar */
  --sb-bg:       var(--bg2);
  --sb-item-active-bg: rgba(0,229,160,0.12);
  --sb-item-active-text: var(--accent);

  /* Session card */
  --sess-bg:     var(--surface);
  --sess-border: var(--border);
  --sess-icon-bg:var(--accent-dim);
  --sess-score-good: var(--accent);
  --sess-score-ok:   #ffa502;
  --sess-score-bad:  #ff4757;

  /* Font */
  --font-d: 'Outfit', sans-serif;
  --font-b: 'Outfit', sans-serif;

  /* Misc */
  --sidebar-w:   220px;
  --topbar-h:    56px;
  --bottomnav-h: 64px;
  --radius:      12px;
  --radius-lg:   18px;

  /* Theme meta */
  --theme-is-light: 0;
  --theme-style: classic;
}

/* ═══════════════════════════════════════════════════
   CLASSIC LIGHT
   Zielony akcent na jasnym tle
═══════════════════════════════════════════════════ */
[data-theme="classic-light"] {
  --bg:          #F7F6F3;
  --bg2:         #EFEDE8;
  --surface:     #FFFFFF;
  --surface2:    #F0EEE9;
  --border:      rgba(14,13,11,0.08);
  --border2:     rgba(14,13,11,0.15);
  --text:        #0E0D0B;
  --text2:       #4A4740;
  --muted:       #8C897F;

  --accent:      #00C07F;
  --accent2:     #00a86e;
  --accent-dim:  rgba(0,192,127,0.10);
  --accent-text: #ffffff;

  --pro:         #6C4FDB;
  --danger:      #E53E3E;
  --warning:     #D97706;
  --success:     #00C07F;

  --hero-bg:     var(--bg);
  --hero-text:   var(--text);
  --hero-sub:    var(--text2);
  --hero-btn-bg: var(--accent);
  --hero-btn-text: #fff;

  --nav-bg:      #FFFFFF;
  --nav-border:  rgba(14,13,11,0.08);
  --nav-active:  var(--accent);
  --nav-inactive: rgba(14,13,11,0.3);

  --card-bg:     #FFFFFF;
  --card-border: rgba(14,13,11,0.08);
  --card-val:    var(--accent);

  --sb-bg:       #FFFFFF;
  --sb-item-active-bg: rgba(0,192,127,0.10);
  --sb-item-active-text: var(--accent);

  --sess-bg:     #FFFFFF;
  --sess-border: rgba(14,13,11,0.08);
  --sess-icon-bg:var(--accent-dim);
  --sess-score-good: var(--accent);
  --sess-score-ok:   #D97706;
  --sess-score-bad:  #E53E3E;

  --font-d: 'Outfit', sans-serif;
  --font-b: 'Outfit', sans-serif;

  --sidebar-w:   220px;
  --topbar-h:    56px;
  --bottomnav-h: 64px;
  --radius:      12px;
  --radius-lg:   18px;

  --theme-is-light: 1;
  --theme-style: classic;
}

/* ═══════════════════════════════════════════════════
   GRADIENT DARK
   Coral + Purple, gradient hero
═══════════════════════════════════════════════════ */
[data-theme="gradient-dark"] {
  --bg:          #09080F;
  --bg2:         #0D0C16;
  --surface:     #1A1526;
  --surface2:    #221C33;
  --border:      rgba(255,255,255,0.06);
  --border2:     rgba(255,255,255,0.12);
  --text:        #f0f2f7;
  --text2:       #9ca3af;
  --muted:       #4b5563;

  --accent:      #FF5C8A;
  --accent2:     #e04878;
  --accent-dim:  rgba(255,92,138,0.12);
  --accent-text: #ffffff;

  --accent-grad-start: #FF5C8A;
  --accent-grad-end:   #8B5CF6;

  --pro:         #8B5CF6;
  --danger:      #ff4757;
  --warning:     #ffa502;
  --success:     #34D399;

  /* Hero z gradientem */
  --hero-bg:     linear-gradient(160deg, #1A0A1F 0%, #0F0A1A 50%, #09080F 100%);
  --hero-text:   #ffffff;
  --hero-sub:    rgba(255,255,255,0.45);
  --hero-btn-bg: linear-gradient(135deg, #FF5C8A, #8B5CF6);
  --hero-btn-text: #ffffff;

  --nav-bg:      var(--bg2);
  --nav-border:  var(--border);
  --nav-active:  var(--accent);
  --nav-inactive: rgba(255,255,255,0.3);

  --card-bg:     var(--surface);
  --card-border: var(--border);
  --card-val:    var(--accent);

  --sb-bg:       var(--bg2);
  --sb-item-active-bg: rgba(255,92,138,0.12);
  --sb-item-active-text: var(--accent);

  --sess-bg:     var(--surface);
  --sess-border: var(--border);
  --sess-icon-bg:rgba(255,92,138,0.12);
  --sess-score-good: #34D399;
  --sess-score-ok:   #ffa502;
  --sess-score-bad:  #ff4757;

  --font-d: 'Outfit', sans-serif;
  --font-b: 'Outfit', sans-serif;

  --sidebar-w:   220px;
  --topbar-h:    56px;
  --bottomnav-h: 64px;
  --radius:      12px;
  --radius-lg:   18px;

  --theme-is-light: 0;
  --theme-style: gradient;
}

/* ═══════════════════════════════════════════════════
   GRADIENT LIGHT
   Coral + Purple na jasnym tle
═══════════════════════════════════════════════════ */
[data-theme="gradient-light"] {
  --bg:          #FDF8FF;
  --bg2:         #F5F0FF;
  --surface:     #FFFFFF;
  --surface2:    #FAF5FF;
  --border:      rgba(139,92,246,0.12);
  --border2:     rgba(139,92,246,0.22);
  --text:        #1A0A2E;
  --text2:       #6B5B8A;
  --muted:       #9E8FB5;

  --accent:      #FF5C8A;
  --accent2:     #e04878;
  --accent-dim:  rgba(255,92,138,0.10);
  --accent-text: #ffffff;

  --accent-grad-start: #FF5C8A;
  --accent-grad-end:   #8B5CF6;

  --pro:         #8B5CF6;
  --danger:      #E53E3E;
  --warning:     #D97706;
  --success:     #059669;

  --hero-bg:     linear-gradient(160deg, #FFF0F5 0%, #F5F0FF 50%, #FDF8FF 100%);
  --hero-text:   #1A0A2E;
  --hero-sub:    rgba(26,10,46,0.45);
  --hero-btn-bg: linear-gradient(135deg, #FF5C8A, #8B5CF6);
  --hero-btn-text: #ffffff;

  --nav-bg:      #FFFFFF;
  --nav-border:  rgba(139,92,246,0.10);
  --nav-active:  var(--accent);
  --nav-inactive: rgba(26,10,46,0.3);

  --card-bg:     #FFFFFF;
  --card-border: rgba(139,92,246,0.13);
  --card-val:    #8B5CF6;

  --sb-bg:       #FFFFFF;
  --sb-item-active-bg: rgba(255,92,138,0.08);
  --sb-item-active-text: var(--accent);

  --sess-bg:     #FFFFFF;
  --sess-border: rgba(139,92,246,0.12);
  --sess-icon-bg:rgba(139,92,246,0.08);
  --sess-score-good: #059669;
  --sess-score-ok:   #D97706;
  --sess-score-bad:  #E53E3E;

  --font-d: 'Outfit', sans-serif;
  --font-b: 'Outfit', sans-serif;

  --sidebar-w:   220px;
  --topbar-h:    56px;
  --bottomnav-h: 64px;
  --radius:      12px;
  --radius-lg:   18px;

  --theme-is-light: 1;
  --theme-style: gradient;
}

/* ═══════════════════════════════════════════════════
   GLASS DARK
   Electric blue, glassmorphism
═══════════════════════════════════════════════════ */
[data-theme="glass-dark"] {
  --bg:          #0A0E1A;
  --bg2:         #0E1525;
  --surface:     rgba(255,255,255,0.05);
  --surface2:    rgba(255,255,255,0.08);
  --border:      rgba(255,255,255,0.09);
  --border2:     rgba(255,255,255,0.15);
  --text:        #f0f2f7;
  --text2:       #9ca3af;
  --muted:       #4b5563;

  --accent:      #3B82F6;
  --accent2:     #2563EB;
  --accent-dim:  rgba(59,130,246,0.15);
  --accent-text: #ffffff;

  --pro:         #8B5CF6;
  --danger:      #ff4757;
  --warning:     #ffa502;
  --success:     #34D399;

  --hero-bg:     linear-gradient(145deg, #0A0E1A, #0E1525);
  --hero-text:   var(--text);
  --hero-sub:    var(--text2);
  --hero-btn-bg: rgba(59,130,246,0.18);
  --hero-btn-text: #93C5FD;
  --hero-btn-border: rgba(59,130,246,0.4);

  --nav-bg:      rgba(10,14,26,0.85);
  --nav-border:  rgba(255,255,255,0.08);
  --nav-active:  var(--accent);
  --nav-inactive: rgba(255,255,255,0.3);

  --card-bg:     rgba(255,255,255,0.05);
  --card-border: rgba(255,255,255,0.1);
  --card-val:    var(--accent);

  --sb-bg:       rgba(14,21,37,0.95);
  --sb-item-active-bg: rgba(59,130,246,0.15);
  --sb-item-active-text: #93C5FD;

  --sess-bg:     rgba(255,255,255,0.04);
  --sess-border: rgba(255,255,255,0.08);
  --sess-icon-bg:rgba(59,130,246,0.15);
  --sess-score-good: #34D399;
  --sess-score-ok:   #ffa502;
  --sess-score-bad:  #ff4757;

  /* Glass blur effect */
  --glass-blur:  blur(12px);
  --glass-blur-nav: blur(20px);

  --font-d: 'Outfit', sans-serif;
  --font-b: 'Outfit', sans-serif;

  --sidebar-w:   220px;
  --topbar-h:    56px;
  --bottomnav-h: 64px;
  --radius:      12px;
  --radius-lg:   18px;

  --theme-is-light: 0;
  --theme-style: glass;
}

/* ═══════════════════════════════════════════════════
   GLASS LIGHT
   Electric blue na jasnym tle, glass cards
═══════════════════════════════════════════════════ */
[data-theme="glass-light"] {
  --bg:          #EEF4FF;
  --bg2:         #E8F0FE;
  --surface:     rgba(255,255,255,0.75);
  --surface2:    rgba(255,255,255,0.5);
  --border:      rgba(37,99,235,0.12);
  --border2:     rgba(37,99,235,0.22);
  --text:        #0C1A3A;
  --text2:       #4A6080;
  --muted:       #8BA4C0;

  --accent:      #2563EB;
  --accent2:     #1D4ED8;
  --accent-dim:  rgba(37,99,235,0.10);
  --accent-text: #ffffff;

  --pro:         #7C3AED;
  --danger:      #DC2626;
  --warning:     #D97706;
  --success:     #059669;

  --hero-bg:     linear-gradient(145deg, #EEF4FF, #E8F0FE);
  --hero-text:   var(--text);
  --hero-sub:    var(--text2);
  --hero-btn-bg: rgba(37,99,235,0.12);
  --hero-btn-text: #2563EB;
  --hero-btn-border: rgba(37,99,235,0.35);

  --nav-bg:      rgba(240,247,255,0.9);
  --nav-border:  rgba(37,99,235,0.10);
  --nav-active:  var(--accent);
  --nav-inactive: rgba(12,26,58,0.3);

  --card-bg:     rgba(255,255,255,0.75);
  --card-border: rgba(37,99,235,0.13);
  --card-val:    var(--accent);

  --sb-bg:       rgba(255,255,255,0.9);
  --sb-item-active-bg: rgba(37,99,235,0.08);
  --sb-item-active-text: var(--accent);

  --sess-bg:     rgba(255,255,255,0.7);
  --sess-border: rgba(37,99,235,0.12);
  --sess-icon-bg:rgba(37,99,235,0.08);
  --sess-score-good: #059669;
  --sess-score-ok:   #D97706;
  --sess-score-bad:  #DC2626;

  --glass-blur:     blur(12px);
  --glass-blur-nav: blur(20px);

  --font-d: 'Outfit', sans-serif;
  --font-b: 'Outfit', sans-serif;

  --sidebar-w:   220px;
  --topbar-h:    56px;
  --bottomnav-h: 64px;
  --radius:      12px;
  --radius-lg:   18px;

  --theme-is-light: 1;
  --theme-style: glass;
}

/* ═══════════════════════════════════════════════════
   GLASS THEME — backdrop-filter overrides
   (tylko dla glass-dark i glass-light)
═══════════════════════════════════════════════════ */
[data-theme="glass-dark"] .dm-card,
[data-theme="glass-light"] .dm-card,
[data-theme="glass-dark"] .dash-session-card,
[data-theme="glass-light"] .dash-session-card,
[data-theme="glass-dark"] .dash-script-card,
[data-theme="glass-light"] .dash-script-card,
[data-theme="glass-dark"] .profile-section,
[data-theme="glass-light"] .profile-section {
  backdrop-filter: var(--glass-blur, blur(12px));
  -webkit-backdrop-filter: var(--glass-blur, blur(12px));
}

[data-theme="glass-dark"] #vc-bottomnav,
[data-theme="glass-light"] #vc-bottomnav,
[data-theme="glass-dark"] #vc-topbar,
[data-theme="glass-light"] #vc-topbar {
  backdrop-filter: var(--glass-blur-nav, blur(20px));
  -webkit-backdrop-filter: var(--glass-blur-nav, blur(20px));
}

[data-theme="glass-dark"] #vc-sidebar,
[data-theme="glass-light"] #vc-sidebar {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ═══════════════════════════════════════════════════
   GRADIENT THEME — hero overrides
═══════════════════════════════════════════════════ */
[data-theme="gradient-dark"] #screen-dashboard,
[data-theme="gradient-light"] #screen-dashboard {
  padding-top: 0;
}

[data-theme="gradient-dark"] .dash-hero,
[data-theme="gradient-light"] .dash-hero {
  display: block;
}

/* Logo accent color per theme */
[data-theme="classic-dark"]   .vc-logo-accent,
[data-theme="classic-light"]  .vc-logo-accent { color: var(--accent); }
[data-theme="gradient-dark"]  .vc-logo-accent,
[data-theme="gradient-light"] .vc-logo-accent { color: #FF5C8A; }
[data-theme="glass-dark"]     .vc-logo-accent,
[data-theme="glass-light"]    .vc-logo-accent { color: var(--accent); }

/* ═══════════════════════════════════════════════════
   THEME PICKER UI (w profilu)
═══════════════════════════════════════════════════ */
.theme-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.theme-picker-item {
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all .18s;
}

.theme-picker-item:hover {
  border-color: var(--border2);
  transform: translateY(-1px);
}

.theme-picker-item.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.tpi-preview {
  height: 52px;
  display: flex;
  flex-direction: column;
}

.tpi-bar {
  height: 18px;
  flex-shrink: 0;
}

.tpi-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 4px;
}

.tpi-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.tpi-info {
  padding: 6px 8px;
  background: var(--card-bg);
}

.tpi-name {
  font-size: .7rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1px;
}

.tpi-sub {
  font-size: .6rem;
  color: var(--text2);
}

/* Previews per theme */
.tpi-cd .tpi-bar  { background: #0D0C16; }
.tpi-cd .tpi-body { background: #09080F; }
.tpi-cd .tpi-dot  { background: #00e5a0; }

.tpi-cl .tpi-bar  { background: #ffffff; border-bottom: 1px solid rgba(0,0,0,.06); }
.tpi-cl .tpi-body { background: #F7F6F3; }
.tpi-cl .tpi-dot  { background: #00C07F; }

.tpi-gd .tpi-bar  { background: #0D0C16; }
.tpi-gd .tpi-body { background: linear-gradient(90deg,#1A0A1F,#09080F); }
.tpi-gd .tpi-dot  { background: linear-gradient(135deg,#FF5C8A,#8B5CF6); }

.tpi-gl .tpi-bar  { background: #ffffff; border-bottom: 1px solid rgba(0,0,0,.06); }
.tpi-gl .tpi-body { background: linear-gradient(90deg,#FFF0F5,#F5F0FF); }
.tpi-gl .tpi-dot  { background: linear-gradient(135deg,#FF5C8A,#8B5CF6); }

.tpi-bld .tpi-bar  { background: #0E1525; }
.tpi-bld .tpi-body { background: linear-gradient(145deg,#0A0E1A,#0E1525); }
.tpi-bld .tpi-dot  { background: #3B82F6; }

.tpi-bll .tpi-bar  { background: rgba(255,255,255,.85); border-bottom: 1px solid rgba(37,99,235,.1); }
.tpi-bll .tpi-body { background: linear-gradient(145deg,#EEF4FF,#E8F0FE); }
.tpi-bll .tpi-dot  { background: #2563EB; }