/* ============================================================
   WIN 98 THEME — classic silver/navy retro desktop
   ============================================================ */

[data-theme="win98"] {
  --primary: #000080; --primary-light: #0000c8;
  --accent: #000080; --accent-2: #0000ee;
  --bg: #008080; --surface: #c0c0c0; --surface-2: #d4d0c8;
  --text: #000000; --muted: #404040; --subtle: #808080;
  --border: #808080; --border-soft: #c0c0c0;
  --green: #008000; --green-soft: #c8e6c9;
  --red: #800000; --red-soft: #ffe0e0;
  --yellow: #808000; --yellow-soft: #ffffc0;
  --shadow-sm: 1px 1px 0 #fff inset, -1px -1px 0 #404040 inset;
  --shadow-md: 2px 2px 0 #fff inset, -2px -2px 0 #404040 inset;
  --shadow-lg: 0 4px 8px rgba(0,0,0,.35);
  --radius-sm: 0px; --radius: 0px; --radius-lg: 0px;
  /* Win98 sidebar = classic silver panel with navy title bar */
  --sidebar-bg: #c0c0c0; --sidebar-text: #000000; --sidebar-text-active: #ffffff;
  --sidebar-active-bg: #000080; --sidebar-hover-bg: #d4d0c8; --sidebar-accent: #000080;
  --sidebar-glow: #000080; --sidebar-glow-shadow: rgba(0,0,128,.4);
}
[data-theme="win98-dark"] {
  /* High Contrast Black — Win98 accessibility theme */
  --primary: #00ff00; --primary-light: #80ff80;
  --accent: #ffff00; --accent-2: #00ffff;
  --bg: #000000; --surface: #000000; --surface-2: #1c1c1c;
  --text: #ffffff; --muted: #c0c0c0; --subtle: #808080;
  --border: #808080; --border-soft: #404040;
  --green: #00ff00; --green-soft: #003300;
  --red: #ff0000; --red-soft: #330000;
  --yellow: #ffff00; --yellow-soft: #333300;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow-md: 0 2px 6px rgba(0,0,0,.6); --shadow-lg: 0 6px 16px rgba(0,0,0,.7);
  --radius-sm: 0px; --radius: 0px; --radius-lg: 0px;
  --sidebar-bg: #000000; --sidebar-text: #00ff00; --sidebar-text-active: #ffff00;
  --sidebar-active-bg: rgba(0,255,0,.12); --sidebar-hover-bg: rgba(255,255,255,.05); --sidebar-accent: #00ffff;
  --sidebar-glow: #00ff00; --sidebar-glow-shadow: rgba(0,255,0,.5);
}

/* Win98 body overrides — 3D bevel cards & buttons */
body[data-theme="win98"],
body[data-theme="win98-dark"] {
  font-family: 'MS Sans Serif', Arial, sans-serif;
}
body[data-theme="win98"] .card {
  background: #c0c0c0;
  border: none;
  box-shadow: 2px 2px 0 #ffffff inset, -2px -2px 0 #404040 inset;
  border-radius: 0;
}
/* Win98 bevel buttons — classic raised 3D border */
body[data-theme="win98"] button {
  border-radius: 0 !important;
  background: #c0c0c0 !important;
  color: #000 !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #dfdfdf #808080 #808080 #dfdfdf !important;
  box-shadow: 1px 1px 0 #ffffff inset, -1px -1px 0 #404040 inset !important;
  font-family: 'MS Sans Serif', Arial, sans-serif;
  font-weight: normal;
  letter-spacing: 0;
  padding: 4px 12px !important;
  transition: none !important;
  transform: none !important;
}
body[data-theme="win98"] button:hover {
  background: #d0d0d0 !important;
  transform: none !important;
  filter: none !important;
}
body[data-theme="win98"] button:active {
  border-color: #808080 #dfdfdf #dfdfdf #808080 !important;
  box-shadow: 1px 1px 0 #404040 inset, -1px -1px 0 #ffffff inset !important;
  transform: none !important;
}
/* Sidebar nav buttons — stay transparent, no bevel */
body[data-theme="win98"] .ls-step,
body[data-theme="win98"] .nav-group-header {
  all: revert !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 8px 6px 8px 0 !important;
  color: var(--sidebar-text) !important;
  font-family: inherit !important;
  cursor: pointer !important;
}
body[data-theme="win98"] .nav-group-header { padding: 8px 22px !important; }
body[data-theme="win98"] .icon-btn {
  background: rgba(255,255,255,.12) !important;
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 3px !important;
  padding: 0 !important;
  color: #fff !important;
}
body[data-theme="win98"] .lang-btn {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 6px 0 !important;
  color: var(--sidebar-text) !important;
}
body[data-theme="win98"] input[type=text],
body[data-theme="win98"] input[type=number],
body[data-theme="win98"] input[type=date],
body[data-theme="win98"] input[type=password],
body[data-theme="win98"] textarea,
body[data-theme="win98"] select {
  border-radius: 0;
  background: #fff;
  color: #000;
  border: none;
  box-shadow: 1px 1px 0 #404040 inset, -1px -1px 0 #ffffff inset;
}
/* ===== Win98 sidebar — silver panel with bevel + navy title bar ===== */
body[data-theme="win98"] aside {
  background: #c0c0c0 !important;
  border-right: 0 !important;
  box-shadow: -1px 0 0 #ffffff inset, -3px 0 0 #808080 inset !important;
}
body[data-theme="win98"] aside::-webkit-scrollbar-thumb { background: #808080; }

/* Brand area = Win98 title bar (navy gradient, white text) */
body[data-theme="win98"] .brand {
  background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
  margin: 2px 2px 6px;
  padding: 6px 10px 10px;
  box-shadow: 1px 1px 0 #ffffff inset;
}
body[data-theme="win98"] .brand::after { display: none; }
body[data-theme="win98"] .brand-text h1 { color: #ffffff; font-family: 'MS Sans Serif', Arial, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0; }
body[data-theme="win98"] .brand-text .sub { color: #ffffff; opacity: .85; letter-spacing: 1px; }
body[data-theme="win98"] .brand .icon-btn { width: 22px !important; height: 22px !important; flex: 0 0 22px !important; background: #c0c0c0 !important; color: #000 !important; border: 1px solid #000 !important; border-radius: 0 !important; box-shadow: 1px 1px 0 #ffffff inset, -1px -1px 0 #808080 inset !important; }
body[data-theme="win98"] .brand .icon-btn:hover { background: #d4d0c8 !important; transform: none !important; }
body[data-theme="win98"] .brand .icon-btn svg { width: 12px; height: 12px; }

/* Lang rail (SK / EN) on silver background */
body[data-theme="win98"] .lang-rail { margin: 0 12px 8px; padding: 4px 4px 8px; }
body[data-theme="win98"] .lang-btn { color: #000 !important; opacity: .6; font-family: 'MS Sans Serif', Arial, sans-serif; letter-spacing: 1px; }
body[data-theme="win98"] .lang-btn:hover { color: #000080 !important; opacity: .9; }
body[data-theme="win98"] .lang-btn.active { color: #000080 !important; opacity: 1; font-weight: 700; }
body[data-theme="win98"] .lang-underline { background: #000080 !important; box-shadow: none !important; }

/* Level label + stepper on silver */
body[data-theme="win98"] .level-label { color: #404040; opacity: 1; padding-left: 14px; }
body[data-theme="win98"] .level-stepper { padding: 0 12px 4px; }
body[data-theme="win98"] .ls-line-bg { background: #808080; }
body[data-theme="win98"] .ls-line-fg { background: #000080 !important; box-shadow: none !important; }
body[data-theme="win98"] .ls-step { color: #000 !important; }
body[data-theme="win98"] .ls-step:hover { background: #d4d0c8 !important; }
body[data-theme="win98"] .ls-name { color: #000; }
body[data-theme="win98"] .ls-state { color: #404040; }
body[data-theme="win98"] .ls-dot { background: #c0c0c0; border-color: #808080; box-shadow: 1px 1px 0 #ffffff inset, -1px -1px 0 #404040 inset; }
body[data-theme="win98"] .ls-step[data-state="completed"] .ls-dot { background: #000080 !important; border-color: #000080 !important; box-shadow: none; }
body[data-theme="win98"] .ls-step[data-state="completed"] .ls-name { color: #000; }
body[data-theme="win98"] .ls-step[data-state="completed"] .ls-state { color: #000080; }
body[data-theme="win98"] .ls-step[data-state="active"] .ls-dot { background: #fff !important; border-color: #000080 !important; }
body[data-theme="win98"] .ls-step[data-state="active"] .ls-inner-dot { background: #000080 !important; box-shadow: none !important; }
body[data-theme="win98"] .ls-step[data-state="active"] .ls-pulse { border-color: #000080 !important; }
body[data-theme="win98"] .ls-step[data-state="active"] .ls-name { color: #000; }
body[data-theme="win98"] .ls-step[data-state="locked"] .ls-dot { background: #808080; border-color: #606060; }

/* Nav items — Win98 selection look */
body[data-theme="win98"] nav a,
body[data-theme="win98"] .nav-home { color: #000 !important; font-family: 'MS Sans Serif', Arial, sans-serif; }
body[data-theme="win98"] nav a:hover,
body[data-theme="win98"] .nav-home:hover,
body[data-theme="win98"] .nav-group-header:hover { background: #d4d0c8 !important; color: #000 !important; }
body[data-theme="win98"] nav a.active,
body[data-theme="win98"] .nav-home.active { background: #000080 !important; color: #ffffff !important; border-left-color: #000080 !important; }
body[data-theme="win98"] nav a.active .nav-icon,
body[data-theme="win98"] .nav-home.active .nav-icon { color: #ffffff; }
body[data-theme="win98"] nav .group { color: #404040; opacity: 1; }
body[data-theme="win98"] nav .kbd { background: #c0c0c0; color: #000; border: 1px solid #808080; box-shadow: 1px 1px 0 #ffffff inset, -1px -1px 0 #404040 inset; }
body[data-theme="win98"] .nav-group-header { color: #000 !important; font-family: 'MS Sans Serif', Arial, sans-serif !important; }

/* User + XP widget on silver — sunken 3D inset */
body[data-theme="win98"] .user-widget,
body[data-theme="win98"] .xp-widget { background: #c0c0c0 !important; border: 0 !important; box-shadow: 1px 1px 0 #404040 inset, -1px -1px 0 #ffffff inset !important; border-radius: 0 !important; margin-left: 8px; margin-right: 8px; }
body[data-theme="win98"] .user-name { color: #000 !important; }
body[data-theme="win98"] .user-role { color: #000080 !important; }
body[data-theme="win98"] .xp-level { color: #000080 !important; }
body[data-theme="win98"] .xp-bar { background: #808080; }
body[data-theme="win98"] .xp-fill { background: linear-gradient(90deg, #000080, #1084d0) !important; }
body[data-theme="win98"] .xp-meta { color: #000 !important; opacity: .8; }

/* Logout icon in user widget */
body[data-theme="win98"] .user-widget .icon-btn { background: #c0c0c0 !important; color: #000 !important; border: 1px solid #000 !important; box-shadow: 1px 1px 0 #ffffff inset, -1px -1px 0 #808080 inset !important; border-radius: 0 !important; }

/* ===== Win98 dark (High Contrast Black) sidebar ===== */
body[data-theme="win98-dark"] aside {
  background: #000 !important;
  border-right: 2px solid #00ff00 !important;
}
body[data-theme="win98"] .login-box {
  border-radius: 0;
  border: 2px solid #808080;
  box-shadow: 2px 2px 0 #ffffff inset, -2px -2px 0 #404040 inset;
}
body[data-theme="win98"] .login-box form button {
  background: #c0c0c0;
  color: #000;
  border: none;
  box-shadow: 2px 2px 0 #ffffff inset, -2px -2px 0 #404040 inset;
  border-radius: 0;
  font-weight: normal;
  letter-spacing: 0;
}
body[data-theme="win98"] .login-box form button:hover {
  background: #d0d0d0;
  transform: none;
  box-shadow: 2px 2px 0 #ffffff inset, -2px -2px 0 #404040 inset;
}

/* Win98 dark overrides */
body[data-theme="win98-dark"] .card {
  border: 1px solid #00ff00;
  border-radius: 0;
  background: #000;
}
body[data-theme="win98-dark"] button {
  border-radius: 0;
  background: #000;
  color: #ffff00;
  border: 1px solid #00ff00;
  transition: none;
  font-family: 'MS Sans Serif', Arial, sans-serif;
  box-shadow: none;
}
body[data-theme="win98-dark"] button:hover {
  transform: none;
  background: #003300;
}
body[data-theme="win98-dark"] .ls-step,
body[data-theme="win98-dark"] .nav-group-header {
  all: revert !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 8px 6px 8px 0 !important;
  color: var(--sidebar-text) !important;
  font-family: inherit !important;
  cursor: pointer !important;
}
body[data-theme="win98-dark"] .nav-group-header { padding: 8px 22px !important; }
body[data-theme="win98-dark"] .icon-btn {
  background: transparent !important;
  box-shadow: none !important;
  border: 1px solid #00ff00 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: #00ff00 !important;
}
body[data-theme="win98-dark"] .lang-btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 6px 0 !important;
  color: var(--sidebar-text) !important;
}