/* Wii Blue UI Theme */
html[data-theme="wii"] {
  /* Core palette */
  --bg: linear-gradient(180deg, #eef6ff 0%, #e8f2ff 46%, #dcecff 100%);
  --bg-alt: #d8e8f8;
  --bg-legacy: linear-gradient(180deg, #eef6ff 0%, #e8f2ff 46%, #dcecff 100%);
  --surface: #f9fbfd;
  --surface-soft: #eef5fc;
  --surface-subtle: #e5eff8;
  --surface-2: #eef5fc;

  --text: #33495f;
  --muted: #6b8094;
  --accent: #4da7d9;
  --accent-soft: #d5ecfa;
  --accent-strong: #2f89bf;
  --wii-highlight: #2652cb;

  --good: #16a34a;
  --ok: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --bad: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.16);

  /* Borders / surfaces used across homepage + app pages */
  --border-subtle: #c8ddec;
  --border: #bcd6ec;
  --card-border-strong: #b2ccdf;
  --chip-bg: rgba(255, 255, 255, 0.78);
  --panel: #f9fbfd;
  --panel-bg: color-mix(in oklab, var(--surface) 90%, #ffffff 10%);
  --panel-bg-soft: color-mix(in oklab, var(--surface-soft) 88%, #ffffff 12%);
  --panel-border: #c8ddec;
  --panel-border-strong: #9ec2dd;
  --panel-glow: rgba(77, 167, 217, 0.2);
  --panel-glow-strong: rgba(77, 167, 217, 0.3);
  --field: #ffffff;
  --focus: #2f89bf;
  --focus-ring: rgba(47, 137, 191, 0.28);
  --sel-border: #9ec2dd;
  --sel-glow: rgba(77, 167, 217, 0.28);

  /* Glow + depth */
  --hero-glow-1: rgba(255, 255, 255, 0.74);
  --hero-glow-2: rgba(125, 178, 219, 0.26);
  --shadow-soft: 0 8px 20px rgba(71, 104, 136, 0.18);
  --shadow: 0 6px 16px rgba(71, 104, 136, 0.16);

  /* Radius limits aligned with existing production themes */
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --radius-pill: 12px;
  --radius: 12px;
  --rad-lg: 14px;
  --rad-md: 10px;
  --rad-sm: 8px;
  --rad-pill: 12px;

  /* Misc compatibility tokens used by app pages */
  --font-body: "Segoe UI", "Trebuchet MS", Tahoma, Geneva, Verdana, sans-serif;
  --font-sans: "Segoe UI", "Trebuchet MS", Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: Consolas, "SFMono-Regular", Menlo, "Courier New", monospace;
  --ui-font: var(--font-body);
  --log-normal: #1f2937;
  --log-warning: #d97706;
  --log-error: #dc2626;
}

/* Subtle Wii-style atmosphere without changing layout/padding metrics */
html[data-theme="wii"] body {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.9), transparent 42%),
    linear-gradient(to bottom, #eef6ff, #dfefff);
}

html[data-theme="wii"] .hero-panel,
html[data-theme="wii"] .feature-card,
html[data-theme="wii"] .plan,
html[data-theme="wii"] .card {
  border-color: var(--card-border-strong);
  box-shadow: var(--shadow-soft);
}

html[data-theme="wii"] .btn-primary {
  color: #1f364d;
  background: linear-gradient(180deg, #ffffff 0%, #e8f5ff 45%, #cfe9fb 100%);
  border-color: var(--panel-border-strong);
}

html[data-theme="wii"] .btn-primary:hover {
  box-shadow: 0 10px 24px rgba(71, 104, 136, 0.24);
}

/* Portal buttons: make panel list + power actions match Add Server button style */
html[data-theme="wii"] .app .sidebar #panelList .server-btn.panel-btn,
html[data-theme="wii"] .explorer .backups-index .index-list .index-item,
html[data-theme="wii"] .explorer .settings-index .index-list .index-item,
html[data-theme="wii"] .portal-topbar .power-actions button {
  border-radius: var(--radius-pill);
  border: 1px solid var(--panel-border-strong);
  background: linear-gradient(180deg, #ffffff 0%, #e8f5ff 45%, #cfe9fb 100%);
  color: #1f364d;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}

html[data-theme="wii"] .app .sidebar #panelList .server-btn.panel-btn {
  padding: 0.35rem 1rem;
  filter: none;
  position: relative;
  overflow: hidden;
}

html[data-theme="wii"] .explorer .backups-index .index-list,
html[data-theme="wii"] .explorer .settings-index .index-list {
  padding-top: 4px;
}

html[data-theme="wii"] .explorer .backups-index .index-list .index-item,
html[data-theme="wii"] .explorer .settings-index .index-list .index-item {
  padding: 0.35rem 1rem;
  filter: none;
  position: relative;
  overflow: hidden;
}

html[data-theme="wii"] .portal-topbar .power-actions button {
  padding: 0.35rem 1rem;
}

html[data-theme="wii"] .app .sidebar #panelList .server-btn.panel-btn:hover:not(:disabled),
html[data-theme="wii"] .explorer .backups-index .index-list .index-item:hover:not(:disabled),
html[data-theme="wii"] .explorer .settings-index .index-list .index-item:hover:not(:disabled),
html[data-theme="wii"] .portal-topbar .power-actions button:hover:not(:disabled) {
  border-color: var(--panel-border-strong);
  box-shadow: 0 10px 24px rgba(71, 104, 136, 0.24);
  transform: translateY(-1px);
  filter: none;
}

html[data-theme="wii"] .app .sidebar #panelList .server-btn.panel-btn.active {
  border-color: #2a72d8;
  background:
    linear-gradient(
      180deg,
      rgba(38, 82, 203, 0.6) 0%,
      rgba(38, 82, 203, 0.6) 34%,
      rgba(38, 82, 203, 0.48) 48%,
      rgba(38, 82, 203, 0.3) 58%,
      rgba(38, 82, 203, 0.14) 66%,
      rgba(38, 82, 203, 0) 76%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f3f7ff 52%,
      #edf4ff 74%,
      #ffffff 100%
    );
  color: #0d3aa8;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
  box-shadow:
    0 10px 24px rgba(20, 44, 116, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(42, 114, 216, 0.62),
    inset 0 0 0 3px rgba(167, 204, 255, 0.72);
}

html[data-theme="wii"] .explorer .backups-index .index-list .index-item.active,
html[data-theme="wii"] .explorer .settings-index .index-list .index-item.active {
  border-color: #2a72d8;
  background:
    linear-gradient(
      180deg,
      rgba(38, 82, 203, 0.6) 0%,
      rgba(38, 82, 203, 0.6) 34%,
      rgba(38, 82, 203, 0.48) 48%,
      rgba(38, 82, 203, 0.3) 58%,
      rgba(38, 82, 203, 0.14) 66%,
      rgba(38, 82, 203, 0) 76%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f3f7ff 52%,
      #edf4ff 74%,
      #ffffff 100%
    );
  color: #0d3aa8;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
  box-shadow:
    0 10px 24px rgba(20, 44, 116, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(42, 114, 216, 0.62),
    inset 0 0 0 3px rgba(167, 204, 255, 0.72);
}

html[data-theme="wii"] .app .sidebar #panelList .server-btn.panel-btn.active::before {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  top: 4px;
  height: 34%;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  pointer-events: none;
}

html[data-theme="wii"] .explorer .backups-index .index-list .index-item.active::before,
html[data-theme="wii"] .explorer .settings-index .index-list .index-item.active::before {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  top: 4px;
  height: 34%;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  pointer-events: none;
}

html[data-theme="wii"] .app .sidebar #panelList .server-btn.panel-btn::before {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  top: 4px;
  height: 34%;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.18) 100%
  );
  pointer-events: none;
}

html[data-theme="wii"] .explorer .backups-index .index-list .index-item::before,
html[data-theme="wii"] .explorer .settings-index .index-list .index-item::before {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  top: 4px;
  height: 34%;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.18) 100%
  );
  pointer-events: none;
}

html[data-theme="wii"] .app .sidebar #panelList .server-btn.panel-btn:active:not(:disabled),
html[data-theme="wii"] .explorer .backups-index .index-list .index-item:active:not(:disabled),
html[data-theme="wii"] .explorer .settings-index .index-list .index-item:active:not(:disabled),
html[data-theme="wii"] .portal-topbar .power-actions button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-soft);
}

html[data-theme="wii"] .app .sidebar #panelList .server-btn.panel-btn:disabled,
html[data-theme="wii"] .explorer .backups-index .index-list .index-item:disabled,
html[data-theme="wii"] .explorer .settings-index .index-list .index-item:disabled,
html[data-theme="wii"] .portal-topbar .power-actions button:disabled {
  box-shadow: none;
}

/* Metrics sidebar list buttons: match Wii portal button style */
html[data-theme="wii"] .explorer .metric-list {
  padding-top: 4px;
}

html[data-theme="wii"] .explorer .metric-list .metric-item {
  border-radius: var(--radius-pill);
  border: 1px solid var(--panel-border-strong);
  background: linear-gradient(180deg, #ffffff 0%, #e8f5ff 45%, #cfe9fb 100%);
  color: #1f364d;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

html[data-theme="wii"] .explorer .metric-list .metric-item:hover:not(:disabled),
html[data-theme="wii"] .explorer .metric-list .metric-item.active {
  border-color: var(--panel-border-strong);
  background: linear-gradient(180deg, #ffffff 0%, #e8f5ff 45%, #cfe9fb 100%);
  box-shadow: 0 10px 24px rgba(71, 104, 136, 0.24);
  transform: translateY(-1px);
}

html[data-theme="wii"] .explorer .metric-list .metric-item.active {
  border-color: #2a72d8;
  background:
    linear-gradient(
      180deg,
      rgba(38, 82, 203, 0.6) 0%,
      rgba(38, 82, 203, 0.6) 34%,
      rgba(38, 82, 203, 0.48) 48%,
      rgba(38, 82, 203, 0.3) 58%,
      rgba(38, 82, 203, 0.14) 66%,
      rgba(38, 82, 203, 0) 76%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f3f7ff 52%,
      #edf4ff 74%,
      #ffffff 100%
    );
  color: #0d3aa8;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
  box-shadow:
    0 10px 24px rgba(20, 44, 116, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(42, 114, 216, 0.62),
    inset 0 0 0 3px rgba(167, 204, 255, 0.72);
}

html[data-theme="wii"] .explorer .metric-list .metric-item.active::before {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  top: 4px;
  height: 34%;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  pointer-events: none;
}

html[data-theme="wii"] .explorer .metric-list .metric-item::before {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  top: 4px;
  height: 34%;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.18) 100%
  );
  pointer-events: none;
}

html[data-theme="wii"] .explorer .metric-list .metric-item.active .metric-value {
  color: #1b4bb7;
}

html[data-theme="wii"] .explorer .metric-list .metric-item:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-soft);
}

html[data-theme="wii"] .explorer .metric-list .metric-item:disabled {
  box-shadow: none;
}

html[data-theme="wii"] .explorer .chart-wrap,
html[data-theme="wii"] .explorer .mini-chart {
  background: #000;
}

/* Homepage top bar text */
html[data-theme="wii"] .site-header .brand-text-main,
html[data-theme="wii"] .site-header .brand-text-sub,
html[data-theme="wii"] .site-header .nav-link,
html[data-theme="wii"] .site-header .nav-link:hover,
html[data-theme="wii"] .site-header .nav-link:visited {
  color: #ffffff !important;
}

/* Login page compatibility: prevent global Wii button/card overrides from breaking login styles */
html[data-theme="wii"] .login-mascot + .card {
  background: linear-gradient(135deg, var(--panel), var(--panel-soft)) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* Login/Register switcher bar */
html[data-theme="wii"] .login-mascot + .card .tabs {
  background: linear-gradient(180deg, #d9ecff 0%, #93c4ef 55%, #5b95cc 100%) !important;
  border-color: #6ea5d6 !important;
}

/* Login/Register tabs: glossy blue Wii look */
html[data-theme="wii"] .login-mascot + .card .tab {
  color: #11409d !important;
  border-color: #88b4de !important;
  background:
    linear-gradient(
      180deg,
      rgba(38, 82, 203, 0.28) 0%,
      rgba(38, 82, 203, 0.24) 34%,
      rgba(38, 82, 203, 0.14) 54%,
      rgba(38, 82, 203, 0) 76%
    ),
    linear-gradient(180deg, #ffffff 0%, #edf4ff 62%, #ffffff 100%) !important;
  box-shadow: none !important;
}

html[data-theme="wii"] .login-mascot + .card .tab[aria-selected="true"] {
  color: #0d3aa8 !important;
  border-color: #2a72d8 !important;
  background:
    linear-gradient(
      180deg,
      rgba(38, 82, 203, 0.6) 0%,
      rgba(38, 82, 203, 0.56) 34%,
      rgba(38, 82, 203, 0.38) 52%,
      rgba(38, 82, 203, 0.12) 68%,
      rgba(38, 82, 203, 0) 80%
    ),
    linear-gradient(180deg, #ffffff 0%, #f1f6ff 56%, #ffffff 100%) !important;
  box-shadow: none !important;
}

/* Login action buttons: Continue with Google / Sign in / Create account */
html[data-theme="wii"] .login-mascot + .card .btn-primary,
html[data-theme="wii"] .login-mascot + .card .btn.commit {
  color: #0d3aa8 !important;
  border-color: #2a72d8 !important;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(38, 82, 203, 0.6) 0%,
      rgba(38, 82, 203, 0.56) 34%,
      rgba(38, 82, 203, 0.38) 52%,
      rgba(38, 82, 203, 0.12) 68%,
      rgba(38, 82, 203, 0) 80%
    ),
    linear-gradient(180deg, #ffffff 0%, #f1f6ff 56%, #ffffff 100%) !important;
  box-shadow: none !important;
}

html[data-theme="wii"] .login-mascot + .card .btn-primary::before,
html[data-theme="wii"] .login-mascot + .card .btn.commit::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 3px;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  pointer-events: none;
}

html[data-theme="wii"] .login-mascot + .card .btn-primary:hover:not(:disabled),
html[data-theme="wii"] .login-mascot + .card .btn.commit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: none !important;
}

html[data-theme="wii"] .login-mascot + .card .btn,
html[data-theme="wii"] .login-mascot + .card .btn:hover:not(:disabled),
html[data-theme="wii"] .login-mascot + .card .btn:active:not(:disabled),
html[data-theme="wii"] .login-mascot + .card .btn.commit,
html[data-theme="wii"] .login-mascot + .card .btn.commit:hover:not(:disabled),
html[data-theme="wii"] .login-mascot + .card .btn.commit:active:not(:disabled),
html[data-theme="wii"] .login-mascot + .card .tab,
html[data-theme="wii"] .login-mascot + .card .tab:hover,
html[data-theme="wii"] .login-mascot + .card .tab:active,
html[data-theme="wii"] .login-mascot + .card .tab[aria-selected="true"] {
  box-shadow: none !important;
}

html[data-theme="wii"] .login-mascot + .card .btn-ghost {
  color: var(--text) !important;
  background: var(--surface-soft) !important;
  border-color: var(--border-subtle) !important;
}