/*
 * Vikinger Modern Override
 * ------------------------
 * Twitter/X-inspired minimalist refresh with a blue-violet accent palette
 * and a light/dark mode toggle.
 *
 * Strategy:
 *   1. Override the theme's CSS custom properties on :root (light default).
 *   2. Override the same properties again inside body.vk-dark (dark mode).
 *   3. Add structural polish (radius, spacing, borders) after the variables.
 *
 * Loaded AFTER style.css and the customizer inline styles so it wins the
 * cascade at equal specificity. No functionality is changed.
 */

/* =========================================================================
   1. LIGHT MODE (default) — variable overrides
   ========================================================================= */
:root {
  /* ---- Primary palette (violet, accent) ---- */
  --color-primary:                          #615dfa;
  --color-primary-hover:                    #4f4cd8;
  --color-primary-light:                    #8b88ff;
  --color-primary-dark:                     #4f4cd8;
  --color-primary-shadow:                   #615dfa;
  --color-primary-rgb:                      97, 93, 250;

  /* ---- Secondary palette (deeper indigo) ---- */
  --color-secondary:                        #4f4cd8;
  --color-secondary-hover:                  #4340c2;
  --color-secondary-dark:                   #3b389f;
  --color-secondary-shadow:                 #4f4cd8;
  --color-secondary-rgb:                    79, 76, 216;

  /* ---- Tertiary palette (rose/red for warnings, unchanged tone) ---- */
  --color-tertiary:                         #f43f5e;
  --color-tertiary-hover:                   #e11d48;
  --color-tertiary-shadow:                  #f43f5e;
  --color-tertiary-rgb:                     244, 63, 94;

  /* ---- Body & boxes (very light, near-white) ---- */
  --color-body:                             #f7f9fb;
  --color-body-rgb:                         247, 249, 251;

  --color-box-background:                   #ffffff;
  --color-box-background-alt:               #fbfbfd;
  --color-box-over-box-background:          #ffffff;
  --color-box-over-box-light-background:    #ffffff;

  --color-box-highlight-background:         #f3f4ff;
  --color-box-hover-background:             #f0f1ff;

  /* ---- Text ---- */
  --color-text:                             #0f1419;
  --color-text-alt:                         #536471;
  --color-text-alt-2:                       #6b7684;
  --color-text-rgb:                         15, 20, 25;

  /* ---- Icons ---- */
  --color-icon:                             #8b98a5;
  --color-icon-highlighted:                 #0f1419;

  /* ---- Borders & dividers (Twitter-thin) ---- */
  --color-border:                           #eff3f4;
  --color-divider:                          #f2f4f6;

  /* ---- Header (kept violet, but flatter) ---- */
  --color-header-background:                #615dfa;
  --color-header-logo-background:           #4f4cd8;
  --color-header-text:                      #ffffff;
  --color-header-icon:                      #c7c5ff;
  --color-header-icon-hover:                #ffffff;
  --color-header-profile-settings-icon:     #ffffff;
  --color-header-mobilemenu-trigger-icon:   #ffffff;
  --color-header-divider:                   #7a77fd;
  --color-header-input-background:          #4f4cd8;
  --color-header-input-placeholder:         #c7c5ff;
  --color-header-progressbar-line-gradient-start: #8b88ff;
  --color-header-progressbar-line-gradient-end:   #c7c5ff;
  --color-header-progressbar-underline:     #4a46c8;

  /* ---- Shadows (softer) ---- */
  --color-box-shadow:                       #0f1419;
  --color-overbox-shadow:                   #0f1419;
  --color-overbox-dark-shadow:              #0f1419;
  --color-overbox-big-shadow:               #0f1419;

  /* ---- Progress bar (violet gradient) ---- */
  --color-progressbar-line-gradient-start:  #615dfa;
  --color-progressbar-line-gradient-end:    #8b88ff;
  --color-progressbar-underline:            #eef0f7;

  /* ---- Loading bars ---- */
  --color-loading-bar-1:                    #615dfa;
  --color-loading-bar-2:                    #6a67fa;
  --color-loading-bar-3:                    #7573fa;
  --color-loading-bar-4:                    #807efa;
  --color-loading-bar-5:                    #8b88ff;
  --color-loading-bar-6:                    #9694ff;
  --color-loading-bar-7:                    #a09fff;
  --color-loading-bar-8:                    #c7c5ff;

  /* ---- Avatar rank hexagon ---- */
  --color-avatar-rank-hexagon:              #615dfa;

  /* ---- Loading screen ---- */
  --color-loading-screen-background:        #ffffff;

  /* ---- Overlay ---- */
  --color-overlay:                          #0f1419;

  /* ---- Modern-only vars (used by our own rules below) ---- */
  --vk-radius-sm:                           8px;
  --vk-radius-md:                           14px;
  --vk-radius-lg:                           20px;
  --vk-radius-pill:                         999px;
  --vk-shadow-soft:                         0 1px 2px rgba(15, 20, 25, 0.04),
                                            0 4px 12px rgba(15, 20, 25, 0.04);
  --vk-shadow-lift:                         0 4px 24px rgba(15, 20, 25, 0.08);
  --vk-focus-ring:                          0 0 0 3px rgba(97, 93, 250, 0.35);
  --vk-transition:                          .18s cubic-bezier(.4, 0, .2, 1);
}


/* =========================================================================
   2. DARK MODE — variable overrides
   Activated by adding class "vk-dark" on <body>.
   ========================================================================= */
body.vk-dark {
  /* ---- Primary palette (brighter violet on dark) ---- */
  --color-primary:                          #8b88ff;
  --color-primary-hover:                    #a5a1ff;
  --color-primary-light:                    #c7c5ff;
  --color-primary-dark:                     #7c78ff;
  --color-primary-shadow:                   #8b88ff;
  --color-primary-rgb:                      139, 136, 255;

  /* ---- Secondary palette ---- */
  --color-secondary:                        #7c78ff;
  --color-secondary-hover:                  #9691ff;
  --color-secondary-dark:                   #615dfa;
  --color-secondary-shadow:                 #7c78ff;
  --color-secondary-rgb:                    124, 120, 255;

  /* ---- Tertiary ---- */
  --color-tertiary:                         #ff5b74;
  --color-tertiary-hover:                   #ff7488;
  --color-tertiary-shadow:                  #ff5b74;
  --color-tertiary-rgb:                     255, 91, 116;

  /* ---- Body & boxes (near-black, X-style) ---- */
  --color-body:                             #000000;
  --color-body-rgb:                         0, 0, 0;

  --color-box-background:                   #16181c;
  --color-box-background-alt:               #1c1f24;
  --color-box-over-box-background:          #1c1f24;
  --color-box-over-box-light-background:    #22262d;

  --color-box-highlight-background:         #1c1f24;
  --color-box-hover-background:             #22262d;

  /* ---- Text ---- */
  --color-text:                             #e7e9ea;
  --color-text-alt:                         #71767b;
  --color-text-alt-2:                       #8b98a5;
  --color-text-rgb:                         231, 233, 234;

  /* ---- Icons ---- */
  --color-icon:                             #71767b;
  --color-icon-highlighted:                 #e7e9ea;

  /* ---- Borders ---- */
  --color-border:                           #2f3336;
  --color-divider:                          #2a2d31;

  /* ---- Header (deep, less saturated) ---- */
  --color-header-background:                #16181c;
  --color-header-logo-background:           #8b88ff;
  --color-header-text:                      #e7e9ea;
  --color-header-icon:                      #8b98a5;
  --color-header-icon-hover:                #e7e9ea;
  --color-header-profile-settings-icon:     #e7e9ea;
  --color-header-mobilemenu-trigger-icon:   #e7e9ea;
  --color-header-divider:                   #2f3336;
  --color-header-input-background:          #22262d;
  --color-header-input-placeholder:         #71767b;
  --color-header-progressbar-line-gradient-start: #8b88ff;
  --color-header-progressbar-line-gradient-end:   #c7c5ff;
  --color-header-progressbar-underline:     #2f3336;

  /* ---- Shadows (kept minimal on dark) ---- */
  --color-box-shadow:                       #000000;
  --color-overbox-shadow:                   #000000;
  --color-overbox-dark-shadow:              #000000;
  --color-overbox-big-shadow:               #000000;

  /* ---- Progress bar ---- */
  --color-progressbar-line-gradient-start:  #8b88ff;
  --color-progressbar-line-gradient-end:    #c7c5ff;
  --color-progressbar-underline:            #2f3336;

  /* ---- Loading bars ---- */
  --color-loading-bar-1:                    #8b88ff;
  --color-loading-bar-2:                    #9491ff;
  --color-loading-bar-3:                    #9d9aff;
  --color-loading-bar-4:                    #a6a3ff;
  --color-loading-bar-5:                    #afacff;
  --color-loading-bar-6:                    #b8b5ff;
  --color-loading-bar-7:                    #c1beff;
  --color-loading-bar-8:                    #c7c5ff;

  /* ---- Avatar rank hexagon ---- */
  --color-avatar-rank-hexagon:              #8b88ff;

  /* ---- Loading screen ---- */
  --color-loading-screen-background:        #000000;

  /* ---- Overlay ---- */
  --color-overlay:                          #000000;

  /* ---- Structural (redefine only what changes) ---- */
  --vk-shadow-soft:                         0 0 0 1px rgba(47, 51, 54, 0.6);
  --vk-shadow-lift:                         0 4px 24px rgba(0, 0, 0, 0.5);
  --vk-focus-ring:                          0 0 0 3px rgba(139, 136, 255, 0.4);
}


/* =========================================================================
   3. STRUCTURAL POLISH — applies to both modes
   Rules that go beyond variable overrides. Uses higher specificity where
   needed to beat compiled theme rules.
   ========================================================================= */

/* --- Global smoothness --- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  transition: background-color var(--vk-transition), color var(--vk-transition);
  letter-spacing: -0.01em;
}

/* Slightly tighter headings for a modern feel */
h1, h2, h3, h4, h5, h6,
.widget-box-title,
.section-header-title {
  letter-spacing: -0.02em;
}

/* --- Text selection --- */
::selection {
  background: rgba(var(--color-primary-rgb), 0.28);
  color: var(--color-text);
}

/* --- Focus ring for accessibility --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--vk-focus-ring);
  border-radius: var(--vk-radius-sm);
}

/* --- Scrollbar (webkit) --- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 999px;
  border: 2px solid var(--color-body);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-icon);
}

/* --- Cards / boxes: softer look, more radius, thinner shadows --- */
.widget-box,
.section-box,
.section-box-item,
.content-box,
.post-preview,
.post-open,
.forum-post,
.event-preview,
.badge-item,
.quest,
.stream-box,
.streamer-box,
.user-preview,
.product-preview,
.progress-stat,
.calendar,
.chart,
.form-box,
.popup-box,
.chat-widget,
.navigation-widget,
.dropdown-box {
  border-radius: var(--vk-radius-lg) !important;
  box-shadow: var(--vk-shadow-soft) !important;
  border: 1px solid var(--color-border);
  transition: box-shadow var(--vk-transition),
              border-color var(--vk-transition),
              background-color var(--vk-transition);
}

body.vk-dark .widget-box,
body.vk-dark .section-box,
body.vk-dark .section-box-item,
body.vk-dark .content-box,
body.vk-dark .post-preview,
body.vk-dark .post-open,
body.vk-dark .forum-post,
body.vk-dark .event-preview,
body.vk-dark .badge-item,
body.vk-dark .quest,
body.vk-dark .stream-box,
body.vk-dark .streamer-box,
body.vk-dark .user-preview,
body.vk-dark .product-preview,
body.vk-dark .progress-stat,
body.vk-dark .calendar,
body.vk-dark .chart,
body.vk-dark .form-box,
body.vk-dark .popup-box,
body.vk-dark .chat-widget,
body.vk-dark .navigation-widget,
body.vk-dark .dropdown-box {
  box-shadow: none !important;
  border-color: var(--color-border);
}

/* --- Buttons: rounder, pill option, subtle motion --- */
.button {
  border-radius: var(--vk-radius-md) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  transition: transform var(--vk-transition),
              box-shadow var(--vk-transition),
              background-color var(--vk-transition),
              color var(--vk-transition) !important;
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

/* Pill-style buttons for primary CTAs when they carry .medium/.big */
.button.medium,
.button.big {
  border-radius: var(--vk-radius-pill) !important;
}

/* Kill heavy button shadows */
.button.primary,
.button.secondary,
.button.tertiary {
  box-shadow: none !important;
}
.button.primary:hover,
.button.secondary:hover,
.button.tertiary:hover {
  box-shadow: 0 6px 16px rgba(var(--color-primary-rgb), 0.25) !important;
}

/* --- Inputs: cleaner, more rounded --- */
.form-input input,
.form-input textarea,
.form-input select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
  border-radius: var(--vk-radius-md) !important;
  border: 1px solid var(--color-border) !important;
  background: var(--color-box-background) !important;
  color: var(--color-text) !important;
  transition: border-color var(--vk-transition), box-shadow var(--vk-transition) !important;
}

.form-input input:focus,
.form-input textarea:focus,
.form-input select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15) !important;
  outline: none !important;
}

/* --- Avatars: consistent round shape, subtle ring --- */
.user-avatar .user-avatar-content img,
.user-avatar-content img {
  border-radius: 50%;
}

/* --- Links --- */
a {
  transition: color var(--vk-transition);
}

/* --- Post preview: Twitter-like density --- */
.post-preview,
.post-open {
  padding: 4px !important;
}
.post-preview-header,
.post-open-header {
  padding: 20px 24px !important;
}
.post-preview-body,
.post-open-body {
  padding: 0 24px 20px !important;
}

/* --- Section-menu tabs, nav pills --- */
.section-menu-item {
  transition: color var(--vk-transition), background var(--vk-transition);
}

/* --- Header: flatter, no heavy border --- */
.header,
.header-secondary {
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

body.vk-dark .header,
body.vk-dark .header-secondary {
  border-bottom-color: var(--color-border);
}

/* --- Navigation widget (sidebar) --- */
.navigation-widget-info-item {
  border-radius: var(--vk-radius-md) !important;
  transition: background var(--vk-transition);
}

.navigation-widget-info-item:hover {
  background: var(--color-box-hover-background);
}

/* --- Dropdown boxes: elevated & soft --- */
.dropdown-box {
  box-shadow: var(--vk-shadow-lift) !important;
  border: 1px solid var(--color-border);
}

body.vk-dark .dropdown-box {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

/* --- Chat widget: subtle, floating --- */
.chat-widget {
  box-shadow: var(--vk-shadow-lift) !important;
}

/* --- Notifications & badges: modern pill --- */
.notification-box,
.chat-widget-messenger-list-item {
  border-radius: var(--vk-radius-md);
}

/* --- Post text: better reading --- */
.post-preview-text,
.post-open-text {
  line-height: 1.6;
  font-size: 15px;
}

/* --- Comment box: rounded, defined --- */
.post-comment {
  border-radius: var(--vk-radius-md);
  transition: background var(--vk-transition);
}

.post-comment:hover {
  background: var(--color-box-hover-background);
}

/* --- Tag stickers: pill --- */
.tag-sticker,
.text-sticker {
  border-radius: var(--vk-radius-pill) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* --- Loading screen: match theme --- */
.loading-screen {
  background: var(--color-loading-screen-background) !important;
}

body.vk-dark .loading-screen-logo {
  filter: brightness(1.1);
}

/* --- Interactive elements: cursor + tap feedback --- */
button,
.button,
[role="button"],
.section-menu-item,
.dropdown-list-item,
.tab-switch-button {
  cursor: pointer;
}


/* =========================================================================
   4. DARK MODE — reinforcement rules
   Some theme rules use hardcoded color values that ignore the variables.
   Force them onto the variable system here.
   ========================================================================= */

body.vk-dark {
  background-color: var(--color-body);
  color: var(--color-text);
}

/* Force any white backgrounds we know of onto card variables */
body.vk-dark .content-grid,
body.vk-dark .content,
body.vk-dark .main-content,
body.vk-dark .site {
  background-color: var(--color-body);
  color: var(--color-text);
}

body.vk-dark .widget-box,
body.vk-dark .section-box,
body.vk-dark .content-box,
body.vk-dark .post-preview,
body.vk-dark .post-open,
body.vk-dark .form-box,
body.vk-dark .popup-box,
body.vk-dark .chat-widget,
body.vk-dark .navigation-widget,
body.vk-dark .dropdown-box,
body.vk-dark .forum-post,
body.vk-dark .event-preview,
body.vk-dark .user-preview,
body.vk-dark .product-preview,
body.vk-dark .stream-box,
body.vk-dark .streamer-box,
body.vk-dark .badge-item,
body.vk-dark .quest,
body.vk-dark .calendar,
body.vk-dark .chart {
  background-color: var(--color-box-background);
  color: var(--color-text);
}

/* Common inner alt-background elements */
body.vk-dark .widget-box-scrollable,
body.vk-dark .widget-box-content,
body.vk-dark .section-box-content,
body.vk-dark .form-input,
body.vk-dark .post-preview-header,
body.vk-dark .post-preview-body,
body.vk-dark .post-comments,
body.vk-dark .post-comment,
body.vk-dark .comment-list,
body.vk-dark .discussion-box {
  background-color: transparent;
  color: var(--color-text);
}

/* Text elements — force onto text vars */
body.vk-dark p,
body.vk-dark span,
body.vk-dark div,
body.vk-dark li,
body.vk-dark td,
body.vk-dark th,
body.vk-dark label,
body.vk-dark .widget-box-title,
body.vk-dark .section-header-title,
body.vk-dark .section-title,
body.vk-dark .post-preview-title,
body.vk-dark .post-preview-text,
body.vk-dark .post-open-title,
body.vk-dark .post-open-text,
body.vk-dark .user-preview-name,
body.vk-dark .user-preview-title,
body.vk-dark .user-name,
body.vk-dark .user-title,
body.vk-dark h1,
body.vk-dark h2,
body.vk-dark h3,
body.vk-dark h4,
body.vk-dark h5,
body.vk-dark h6 {
  color: inherit;
}

/* Muted-text elements */
body.vk-dark .post-preview-timestamp,
body.vk-dark .post-open-timestamp,
body.vk-dark .comment-timestamp,
body.vk-dark .meta-line,
body.vk-dark .meta-line-text,
body.vk-dark .widget-box-title-text-alt,
body.vk-dark .section-header-subtitle {
  color: var(--color-text-alt) !important;
}

/* Inputs in dark */
body.vk-dark input,
body.vk-dark textarea,
body.vk-dark select {
  background: var(--color-box-background-alt) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

body.vk-dark input::placeholder,
body.vk-dark textarea::placeholder {
  color: var(--color-text-alt-2) !important;
}

/* Kill light-mode drop shadows */
body.vk-dark [class*="shadow"] {
  box-shadow: none !important;
}

/* Dividers */
body.vk-dark hr,
body.vk-dark .divider {
  border-color: var(--color-divider);
  background: var(--color-divider);
}


/* =========================================================================
   5. DARK MODE TOGGLE BUTTON
   Injected by vikinger-modern.js; kept discreet, floating bottom-right.
   ========================================================================= */
.vk-theme-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-box-background);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  box-shadow: var(--vk-shadow-lift);
  transition: transform var(--vk-transition),
              background-color var(--vk-transition),
              color var(--vk-transition),
              box-shadow var(--vk-transition);
  padding: 0;
  outline: none;
}

.vk-theme-toggle:hover {
  transform: translateY(-2px) rotate(-8deg);
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), 0.4);
}

.vk-theme-toggle:active {
  transform: translateY(0) rotate(0);
}

.vk-theme-toggle svg {
  width: 22px;
  height: 22px;
  transition: transform var(--vk-transition);
}

.vk-theme-toggle .vk-theme-toggle-sun {
  display: none;
}
.vk-theme-toggle .vk-theme-toggle-moon {
  display: block;
}
body.vk-dark .vk-theme-toggle .vk-theme-toggle-sun {
  display: block;
}
body.vk-dark .vk-theme-toggle .vk-theme-toggle-moon {
  display: none;
}

/* Move up if the theme's chat widget occupies bottom-right */
@media (min-width: 1024px) {
  body.vikinger-chat-widget-visible .vk-theme-toggle,
  body:has(.chat-widget.chat-widget-open) .vk-theme-toggle {
    bottom: 88px;
  }
}


/* =========================================================================
   6. TWEAKS FOR SPECIFIC AREAS
   ========================================================================= */

/* Login / register popup — keep it clean */
.wordpress-login,
.wordpress-login-content {
  background: var(--color-body);
  color: var(--color-text);
}

/* Sidebar navigation active state — use accent gently */
.navigation-widget-info-item.active,
.section-menu-item.active {
  color: var(--color-primary) !important;
  font-weight: 600;
}

/* Progress arcs / stat cards — modern flat */
.progress-stat,
.progress-arc {
  background: var(--color-box-background);
}

/* Reactions row */
.reaction-item {
  transition: transform var(--vk-transition);
}
.reaction-item:hover {
  transform: scale(1.15);
}