/**
 * @name Retro98 Minimalist Discord Theme (DRY)
 * @description A minimalist, retro Windows 98–inspired Discord theme leveraging 98.css.
 *              Uses a pared‑down layout with vintage colors, “MS Sans Serif” typography,
 *              and classic borders/buttons.
 * @author YourName
 * @version 1.0.0
 */

/* Import 98.css for base retro styling */
@import url('https://unpkg.com/98.css');

/* --------------------------------------------------------------------------
   Variables & Base Reset
--------------------------------------------------------------------------- */
:root {
  /* Fonts & Spacing */
  --font: "MS Sans Serif", sans-serif;
  --pad: 8px;               /* overall padding/margin */
  --border-width: 1px;       /* thinner borders for minimalism */

  /* Colors */
  --bg-main: #c0c0c0;        /* Main overall background (classic Win98 gray) */
  --bg-panel: #e0ffff;       /* Content panels & modals: light cyan */
  --bg-sidebar: #d3d3d3;     /* Sidebars: light gray */
  --txt-color: #000;         /* Dark text for high contrast */
  --border-color: #fff;      /* White borders */
  
  /* State / Interaction */
  --hover-effect: rgba(0, 0, 0, 0.1);
}

html, body, * {
  margin: 0;
  padding: 0;
  font-family: var(--font) !important;
  color: var(--txt-color) !important;
  background: var(--bg-main) !important;
}

/* --------------------------------------------------------------------------
   Shared Styles
--------------------------------------------------------------------------- */

/* Minimalist panel style (for content areas, modals, chat bubbles, etc.) */
.panel, 
[class*="content"], 
[class*="message"],
.modal, [class*="modal"],
.window, [class*="window"] {
  background-color: var(--bg-panel) !important;
  border: var(--border-width) outset var(--border-color) !important;
  box-shadow: 1px 1px 0 #000 !important;
  padding: var(--pad) !important;
  margin: var(--pad) !important;
}

/* Sidebar style */
.sidebar, [class*="sidebar"] {
  background-color: var(--bg-sidebar) !important;
  border: var(--border-width) inset var(--border-color) !important;
  padding: var(--pad) !important;
  margin: var(--pad) !important;
}

/* Headers / Titlebars / Footers (grouped together) */
.header, [class*="header"],
.titlebar, [class*="titlebar"],
.topbar, [class*="topbar"],
.footer, [class*="footer"] {
  background-color: var(--bg-panel) !important;
  border: var(--border-width) outset var(--border-color) !important;
  padding: calc(var(--pad) / 2) 10px !important;
  margin: var(--pad) !important;
}

/* Buttons & Interactive Elements */
button, [class*="button"] {
  background: linear-gradient(to bottom, #f0ffff, var(--bg-sidebar)) !important;
  border: var(--border-width) outset var(--border-color) !important;
  box-shadow: 1px 1px 0 #000 !important;
  padding: 4px 8px !important;
  margin: 2px !important;
  cursor: pointer;
  color: var(--txt-color) !important;
  transition: border 0.2s ease;
}
button:hover, [class*="button"]:hover {
  border: var(--border-width) inset var(--border-color) !important;
  box-shadow: none !important;
}

/* Scrollable Areas & Custom Scrollbars */
.scroller, [class*="scroller"] {
  background-color: var(--bg-sidebar) !important;
  border: var(--border-width) solid var(--border-color) !important;
  padding: 4px !important;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-panel);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-sidebar);
  border: var(--border-width) solid var(--border-color);
}

/* Form Elements (inputs, textareas, selects) */
input, textarea, select {
  background-color: #fff !important;
  border: var(--border-width) inset var(--border-color) !important;
  padding: 4px !important;
  margin: 2px !important;
  color: var(--txt-color) !important;
}

/* Avatars & Icons */
.avatar, [class*="avatar"] img {
  border: var(--border-width) solid var(--border-color) !important;
  box-shadow: 1px 1px 0 #000 !important;
}

/* Tabs, Dropdowns, Menus & Tooltips */
.tab, [class*="tab"],
.dropdown, [class*="dropdown"],
.select, [class*="select"],
.tooltip, [class*="tooltip"] {
  background-color: var(--bg-panel) !important;
  border: var(--border-width) outset var(--border-color) !important;
  padding: 4px 8px !important;
  margin: 2px !important;
}

/* --------------------------------------------------------------------------
   Layout Container Overrides (Minimalist Adjustments)
--------------------------------------------------------------------------- */

/* Main app container: remove extra padding/margin */
#app-mount,
.appMount__51fd7,
.app__160d8 {
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--bg-main) !important;
}

/* Force our retro styling on all elements */
* {
  font-family: var(--font) !important;
  color: var(--txt-color) !important;
}