/* =============================================================
 * THEMES — DobrakBot
 * Активируется атрибутом data-theme="<id>" на <html>.
 * Без атрибута = тёмная тема (значения из style.css / admin.css).
 *
 * Темы: dark, ash, black, gray, white,
 *        green, orange, blue, cyan, pink, red
 * ============================================================= */

/* ───────────────────────────── DARK (default) ───────────────────────────── */
html[data-theme="dark"] {
    --bg:         #09090b;
    --bg-elev:    #111114;
    --bg-elev-2:  #18181c;
    --bg-elev-3:  #202027;
    --border:     #26262e;
    --border-2:   #33333d;
    --text:       #ececf1;
    --text-2:     #b8b8c2;
    --muted:      #7e7e8c;
    --primary:    #5865F2;
    --primary-h:  #4752c4;
    --primary-a:  rgba(88, 101, 242, 0.14);
    --success:    #4ade80;
    --success-a:  rgba(74, 222, 128, 0.12);
    --danger:     #f87171;
    --danger-a:   rgba(248, 113, 113, 0.12);
    --warning:    #fbbf24;
    --warning-a:  rgba(251, 191, 36, 0.12);
    --shadow:     0 4px 24px rgba(0, 0, 0, 0.35);
  }
  
  /* ───────────────────────────── ASH (пепельная) ───────────────────────────── */
  html[data-theme="ash"] {
    --bg:         #131316;
    --bg-elev:    #191920;
    --bg-elev-2:  #20202a;
    --bg-elev-3:  #28282f;
    --border:     #303038;
    --border-2:   #3e3e48;
    --text:       #e8e8ed;
    --text-2:     #b0b0bb;
    --muted:      #7a7a85;
    --primary:    #93939f;
    --primary-h:  #808090;
    --primary-a:  rgba(147, 147, 159, 0.16);
    --success:    #4ade80;
    --success-a:  rgba(74, 222, 128, 0.12);
    --danger:     #f87171;
    --danger-a:   rgba(248, 113, 113, 0.12);
    --warning:    #fbbf24;
    --warning-a:  rgba(251, 191, 36, 0.12);
    --shadow:     0 4px 24px rgba(0, 0, 0, 0.4);
  }
  
  /* ───────────────────────────── BLACK (чёрная, OLED) ───────────────────────────── */
  html[data-theme="black"] {
    --bg:         #000000;
    --bg-elev:    #0a0a0a;
    --bg-elev-2:  #121212;
    --bg-elev-3:  #1a1a1a;
    --border:     #1f1f1f;
    --border-2:   #2a2a2a;
    --text:       #f0f0f0;
    --text-2:     #b8b8b8;
    --muted:      #7a7a7a;
    --primary:    #5865F2;
    --primary-h:  #4752c4;
    --primary-a:  rgba(88, 101, 242, 0.14);
    --success:    #4ade80;
    --success-a:  rgba(74, 222, 128, 0.12);
    --danger:     #f87171;
    --danger-a:   rgba(248, 113, 113, 0.12);
    --warning:    #fbbf24;
    --warning-a:  rgba(251, 191, 36, 0.12);
    --shadow:     0 4px 24px rgba(0, 0, 0, 0.6);
  }
  
  /* ───────────────────────────── GRAY (серая) ───────────────────────────── */
  html[data-theme="gray"] {
    --bg:         #1e1e23;
    --bg-elev:    #25252b;
    --bg-elev-2:  #2d2d34;
    --bg-elev-3:  #37373f;
    --border:     #42424b;
    --border-2:   #52525c;
    --text:       #ececf1;
    --text-2:     #b8b8c2;
    --muted:      #80808c;
    --primary:    #8b8fa3;
    --primary-h:  #7a7e92;
    --primary-a:  rgba(139, 143, 163, 0.16);
    --success:    #4ade80;
    --success-a:  rgba(74, 222, 128, 0.12);
    --danger:     #f87171;
    --danger-a:   rgba(248, 113, 113, 0.12);
    --warning:    #fbbf24;
    --warning-a:  rgba(251, 191, 36, 0.12);
    --shadow:     0 4px 24px rgba(0, 0, 0, 0.35);
  }
  
  /* ───────────────────────────── WHITE (белая) ───────────────────────────── */
  html[data-theme="white"] {
    --bg:         #f5f6fa;
    --bg-elev:    #ffffff;
    --bg-elev-2:  #f0f2f7;
    --bg-elev-3:  #e4e7ee;
    --border:     #e2e5ec;
    --border-2:   #cdd1db;
    --text:       #14161c;
    --text-2:     #3f4552;
    --muted:      #6b7280;
    --primary:    #5865F2;
    --primary-h:  #4752c4;
    --primary-a:  rgba(88, 101, 242, 0.12);
    --success:    #16a34a;
    --success-a:  rgba(22, 163, 74, 0.12);
    --danger:     #dc2626;
    --danger-a:   rgba(220, 38, 38, 0.12);
    --warning:    #d97706;
    --warning-a:  rgba(217, 119, 6, 0.12);
    --shadow:     0 4px 24px rgba(15, 20, 40, 0.10);
  }
  
  /* ───────────────────────────── GREEN (зелёная) ───────────────────────────── */
  html[data-theme="green"] {
    --bg:         #0d1510;
    --bg-elev:    #111c15;
    --bg-elev-2:  #17231b;
    --bg-elev-3:  #1f2c23;
    --border:     #253028;
    --border-2:   #334036;
    --text:       #e8f0ea;
    --text-2:     #b0c0b6;
    --muted:      #7a8a80;
    --primary:    #22c55e;
    --primary-h:  #16a34a;
    --primary-a:  rgba(34, 197, 94, 0.16);
    --success:    #4ade80;
    --success-a:  rgba(74, 222, 128, 0.14);
    --danger:     #f87171;
    --danger-a:   rgba(248, 113, 113, 0.12);
    --warning:    #fbbf24;
    --warning-a:  rgba(251, 191, 36, 0.12);
    --shadow:     0 4px 24px rgba(0, 0, 0, 0.4);
  }
  
  /* ───────────────────────────── ORANGE (оранжевая) ───────────────────────────── */
  html[data-theme="orange"] {
    --bg:         #18120a;
    --bg-elev:    #1f180d;
    --bg-elev-2:  #271e11;
    --bg-elev-3:  #332718;
    --border:     #3a2c1a;
    --border-2:   #4d3a23;
    --text:       #f0e8de;
    --text-2:     #c0b0a0;
    --muted:      #8a7a6a;
    --primary:    #f97316;
    --primary-h:  #ea580c;
    --primary-a:  rgba(249, 115, 22, 0.16);
    --success:    #4ade80;
    --success-a:  rgba(74, 222, 128, 0.12);
    --danger:     #ef4444;
    --danger-a:   rgba(239, 68, 68, 0.16);
    --warning:    #fbbf24;
    --warning-a:  rgba(251, 191, 36, 0.12);
    --shadow:     0 4px 24px rgba(0, 0, 0, 0.4);
  }
  
  /* ───────────────────────────── BLUE (синяя) ───────────────────────────── */
  html[data-theme="blue"] {
    --bg:         #0a1020;
    --bg-elev:    #0e1628;
    --bg-elev-2:  #131c30;
    --bg-elev-3:  #1a2540;
    --border:     #1f2c4a;
    --border-2:   #2d3d60;
    --text:       #e0e8f5;
    --text-2:     #a8b4cc;
    --muted:      #6e7a94;
    --primary:    #3b82f6;
    --primary-h:  #2563eb;
    --primary-a:  rgba(59, 130, 246, 0.16);
    --success:    #4ade80;
    --success-a:  rgba(74, 222, 128, 0.12);
    --danger:     #f87171;
    --danger-a:   rgba(248, 113, 113, 0.12);
    --warning:    #fbbf24;
    --warning-a:  rgba(251, 191, 36, 0.12);
    --shadow:     0 4px 24px rgba(0, 0, 0, 0.4);
  }
  
  /* ───────────────────────────── CYAN (голубая) ───────────────────────────── */
  html[data-theme="cyan"] {
    --bg:         #081418;
    --bg-elev:    #0c1c22;
    --bg-elev-2:  #102530;
    --bg-elev-3:  #17323f;
    --border:     #1e3d4d;
    --border-2:   #2a5568;
    --text:       #e0f2f5;
    --text-2:     #a8c8d0;
    --muted:      #6e8a94;
    --primary:    #06b6d4;
    --primary-h:  #0891b2;
    --primary-a:  rgba(6, 182, 212, 0.16);
    --success:    #4ade80;
    --success-a:  rgba(74, 222, 128, 0.12);
    --danger:     #f87171;
    --danger-a:   rgba(248, 113, 113, 0.12);
    --warning:    #fbbf24;
    --warning-a:  rgba(251, 191, 36, 0.12);
    --shadow:     0 4px 24px rgba(0, 0, 0, 0.4);
  }
  
  /* ───────────────────────────── PINK (розовая) ───────────────────────────── */
  html[data-theme="pink"] {
    --bg:         #1a0d15;
    --bg-elev:    #22111b;
    --bg-elev-2:  #2c1623;
    --bg-elev-3:  #381d2e;
    --border:     #452438;
    --border-2:   #5a3050;
    --text:       #f5e0ec;
    --text-2:     #d0a8c0;
    --muted:      #947a8a;
    --primary:    #ec4899;
    --primary-h:  #db2777;
    --primary-a:  rgba(236, 72, 153, 0.16);
    --success:    #4ade80;
    --success-a:  rgba(74, 222, 128, 0.12);
    --danger:     #f87171;
    --danger-a:   rgba(248, 113, 113, 0.12);
    --warning:    #fbbf24;
    --warning-a:  rgba(251, 191, 36, 0.12);
    --shadow:     0 4px 24px rgba(0, 0, 0, 0.4);
  }
  
  /* ───────────────────────────── RED (красная) ───────────────────────────── */
  html[data-theme="red"] {
    --bg:         #180a0a;
    --bg-elev:    #200e0e;
    --bg-elev-2:  #291212;
    --bg-elev-3:  #341818;
    --border:     #3a1f1f;
    --border-2:   #4d2828;
    --text:       #f5e0e0;
    --text-2:     #d0a8a8;
    --muted:      #947a7a;
    --primary:    #ef4444;
    --primary-h:  #dc2626;
    --primary-a:  rgba(239, 68, 68, 0.16);
    --success:    #4ade80;
    --success-a:  rgba(74, 222, 128, 0.12);
    --danger:     #dc2626;
    --danger-a:   rgba(220, 38, 38, 0.16);
    --warning:    #fbbf24;
    --warning-a:  rgba(251, 191, 36, 0.12);
    --shadow:     0 4px 24px rgba(0, 0, 0, 0.4);
  }
  
  /* ───────────────────────────── ADMIN ALIASES ───────────────────────────── */
  /* Админ-переменные следуют за основными. Работает для любой темы. */
  :root,
  html[data-theme] {
    --admin-bg:         var(--bg, #09090b);
    --admin-bg-elev:    var(--bg-elev, #111114);
    --admin-bg-elev-2:  var(--bg-elev-2, #18181c);
    --admin-bg-elev-3:  var(--bg-elev-3, #202027);
    --admin-border:     var(--border, #26262e);
    --admin-border-2:   var(--border-2, #33333d);
    --admin-border-3:   var(--border-2, #33333d);
    --admin-text:       var(--text, #ececf1);
    --admin-text-2:     var(--text-2, #b8b8c2);
    --admin-muted:      var(--muted, #7e7e8c);
    --admin-accent:     var(--primary, #5865F2);
    --admin-accent-2:   var(--primary-h, #4752c4);
    --admin-accent-bg:  var(--primary-a, rgba(88,101,242,0.14));
    --admin-danger:     var(--danger, #ED4245);
    --admin-danger-bg:  var(--danger-a, rgba(237,66,69,0.14));
    --admin-success:    var(--success, #57F287);
    --admin-success-bg: var(--success-a, rgba(87,242,135,0.14));
    --admin-warning:    var(--warning, #FEE75C);
  }
  
  /* ───────────────────────────── OVERRIDES ДЛЯ СВЕТЛЫХ ТЕМ ───────────────────────────── */
  html[data-theme="white"] .topbar,
  html[data-theme="white"] .admin-topbar {
    background: rgba(255, 255, 255, 0.85);
  }
  html[data-theme="white"] .save-bar {
    background: rgba(255, 255, 255, 0.9);
  }
  html[data-theme="white"] .guild-card {
    border-color: rgba(0, 0, 0, 0.06);
  }
  html[data-theme="white"] .guild-banner-empty {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.18), rgba(138, 149, 255, 0.08));
  }
  html[data-theme="white"] .btn {
    border-color: var(--border);
  }
  html[data-theme="white"] .chip-tooltip {
    background: #14161c;
    color: #fff;
  }
  html[data-theme="white"] .chip-tooltip::after {
    border-top-color: #14161c;
  }
  html[data-theme="white"] .bot-preview-card {
    background: #ffffff;
  }
  html[data-theme="white"] .landing-glow {
    background:
      radial-gradient(circle at 50% 35%, rgba(88, 101, 242, 0.12), transparent 42%),
      radial-gradient(circle at 15% 85%, rgba(88, 101, 242, 0.06), transparent 55%);
  }
  html[data-theme="white"] .admin-table thead th {
    background: linear-gradient(180deg, var(--admin-bg-elev-3), var(--admin-bg-elev-2));
    color: var(--admin-text-2);
  }
  html[data-theme="white"] .admin-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.015);
  }
  html[data-theme="white"] .admin-table tbody tr:hover {
    background: rgba(88, 101, 242, 0.05);
  }
  html[data-theme="white"] .admin-edit-input {
    background: #ffffff;
    color: #14161c;
  }
  html[data-theme="white"] .admin-modal {
    background: #ffffff;
  }
  
  /* ───────────────────────────── THEME PICKER ───────────────────────────── */
  .theme-picker-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    transition: transform 0.15s, background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    padding: 0;
  }
  .theme-picker-btn:hover {
    background: var(--bg-elev-2);
    border-color: var(--border-2);
    transform: scale(1.05);
  }
  .theme-picker-btn:active {
    transform: scale(0.95);
  }
  
  .theme-picker-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 2px var(--bg-elev);
    flex-shrink: 0;
  }
  
  .theme-picker-panel {
    position: fixed;
    top: 72px;
    right: 20px;
    z-index: 1000;
    background: var(--bg-elev, #111114);
    border: 1px solid var(--border, #26262e);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    width: 300px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    color: var(--text, #ececf1);
  }
  .theme-picker-panel[hidden] {
    display: none !important;
  }
  
  .theme-picker-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted, #7e7e8c);
    margin-bottom: 10px;
    padding: 0 2px;
  }
  
  .theme-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  
  .theme-picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border, #26262e);
    border-radius: 8px;
    background: var(--bg-elev-2, #18181c);
    color: var(--text-2, #b8b8c2);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
    min-width: 0;
  }
  .theme-picker-item:hover {
    border-color: var(--border-2, #33333d);
    background: var(--bg-elev-3, #202027);
    color: var(--text, #ececf1);
  }
  .theme-picker-item.active {
    border-color: var(--primary, #5865F2);
    background: var(--primary-a, rgba(88,101,242,0.14));
    color: var(--text, #ececf1);
  }
  .theme-picker-item .theme-picker-swatch {
    width: 14px;
    height: 14px;
    box-shadow: none;
  }
  .theme-picker-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  
  @media (max-width: 599px) {
    .theme-picker-btn {
      top: 14px;
      right: 14px;
      width: 40px;
      height: 40px;
    }
    .theme-picker-panel {
      top: 60px;
      right: 14px;
      width: calc(100vw - 28px);
      padding: 12px;
    }
    .theme-picker-grid {
      grid-template-columns: 1fr;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .theme-picker-btn,
    .theme-picker-item {
      transition: none;
    }
  }
  
  /* ───────────────────────────── reCAPTCHA BADGE HIDDEN ───────────────────────────── */
  .grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* Уведомление об использовании reCAPTCHA (обязательно при скрытом бейдже) */
  .recaptcha-notice {
    font-size: 11px;
    color: var(--muted, #7e7e8c);
    margin-top: 8px;
    line-height: 1.4;
    text-align: inherit;
  }
  .recaptcha-notice a {
    color: var(--text-2, #b8b8c2);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .recaptcha-notice a:hover {
    color: var(--text, #ececf1);
  }