/* =========================================================================
   CorSch "Windows 3.11" Theme Preset
   --------------------------------------------------------------------------
   All rules scoped to  body[data-theme-mode="win311"]  so switching to any
   other preset removes them cleanly.

   Authentic Win3.x chrome: grey bevel, navy gradient title bar, MS Sans
   Serif 11px, square corners, pixel-crisp rendering, no glow/blur.
   Minimized top-level windows appear as icons on the teal desktop (the
   only thing that lived on the bare Win3.x desktop).
   ========================================================================= */

body[data-theme-mode="win311"] {
  --bg-base:            #008080;
  --win-face:           #c0c0c0;
  --win-highlight:      #ffffff;
  --win-light:          #dfdfdf;
  --win-shadow:         #808080;
  --win-dark:           #000000;
  --win-title-start:    #000080;
  --win-title-end:      #1084d0;
  --win-title-inactive: #808080;
  --dos-bg:             #000000;
  --dos-fg:             #c0c0c0;
  --accent-green:       #00ff7a;

  font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,Geneva,sans-serif !important;
  font-size: 11px !important;
  color: #000;
  background: #008080 !important;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}

/* Teal desktop with 50% dither overlay (emulates 16-color VGA stipple) */
body[data-theme-mode="win311"]::before {
  content: "";
  position: fixed; inset: 0;
  background: #008080;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 2px);
  z-index: 0;
  pointer-events: none;
}

/* Kill matrix rain canvas + any bg overlay */
body[data-theme-mode="win311"] #matrix,
body[data-theme-mode="win311"] canvas#matrix,
body[data-theme-mode="win311"] .matrix-bg,
body[data-theme-mode="win311"] .background-matrix {
  display: none !important;
}
body[data-theme-mode="win311"] .overlay {
  background: transparent !important;
}

/* =========================================================================
   Chrome mappings — CorSch window manager → Win3.11
   ========================================================================= */

/* Window frame */
body[data-theme-mode="win311"] .wm-window {
  background: #c0c0c0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 2px !important;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px -1px 0 #000000,
    inset  2px  2px 0 #dfdfdf,
    inset -2px -2px 0 #808080 !important;
  color: #000 !important;
  animation: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Title bar */
body[data-theme-mode="win311"] .wm-header,
body[data-theme-mode="win311"] .wm-titlebar,
body[data-theme-mode="win311"] .window-header {
  height: 18px !important;
  min-height: 18px !important;
  background: linear-gradient(90deg, #000080 0%, #1084d0 100%) !important;
  color: #ffffff !important;
  font-weight: bold !important;
  font-size: 11px !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  user-select: none;
  text-shadow: none !important;
}
body[data-theme-mode="win311"] .wm-window:not(.focused) .wm-header,
body[data-theme-mode="win311"] .wm-window:not(.focused) .wm-titlebar,
body[data-theme-mode="win311"] .wm-window:not(.active) .wm-header,
body[data-theme-mode="win311"] .wm-window.inactive .wm-header {
  background: #808080 !important;
  color: #c0c0c0 !important;
}

body[data-theme-mode="win311"] .wm-title,
body[data-theme-mode="win311"] .window-title {
  flex: 1;
  padding: 0 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center;
  font-weight: bold;
  color: inherit !important;
}

/* Window-manager buttons (min/max/close in title bar) */
body[data-theme-mode="win311"] .wm-btn,
body[data-theme-mode="win311"] .wm-header button,
body[data-theme-mode="win311"] .wm-titlebar button,
body[data-theme-mode="win311"] .window-control {
  width: 16px !important;
  height: 14px !important;
  min-width: 16px !important;
  min-height: 14px !important;
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-family: "MS Sans Serif", sans-serif !important;
  display: grid !important;
  place-items: center !important;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px -1px 0 #000000,
    inset  2px  2px 0 #dfdfdf,
    inset -2px -2px 0 #808080 !important;
  text-shadow: none !important;
}
body[data-theme-mode="win311"] .wm-btn:active,
body[data-theme-mode="win311"] .wm-header button:active,
body[data-theme-mode="win311"] .wm-titlebar button:active {
  box-shadow:
    inset  1px  1px 0 #808080,
    inset -1px -1px 0 #ffffff,
    inset  2px  2px 0 #000000,
    inset -2px -2px 0 #dfdfdf !important;
}

/* =========================================================================
   Shell: no taskbar, no start menu (authentic Win3.x — these came with Win95)
   The taskbar element stays in DOM for other themes; here it's hidden.
   Minimized top-level windows appear as naked icons on the desktop instead.
   ========================================================================= */
body[data-theme-mode="win311"] .wm-taskbar,
body[data-theme-mode="win311"] .taskbar,
body[data-theme-mode="win311"] .start-menu,
body[data-theme-mode="win311"] .start-button,
body[data-theme-mode="win311"] [class*="startmenu"] {
  display: none !important;
}

/* If a minimized-windows tray is still rendered (pre-existing markup or a
   legacy component), place it flat on the teal desktop — no taskbar chrome. */
body[data-theme-mode="win311"] .wm-minimized-tray,
body[data-theme-mode="win311"] .minimized-tray {
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  top: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
  display: flex !important;
  gap: 16px !important;
  align-items: flex-end !important;
  z-index: 50;
}
body[data-theme-mode="win311"] .taskbar-item,
body[data-theme-mode="win311"] .wm-taskbar-item {
  width: 84px !important;
  flex-direction: column !important;
  background: transparent !important;
  color: #fff !important;
  text-shadow: 1px 1px 0 #000 !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-family: inherit !important;
  box-shadow: none !important;
}
body[data-theme-mode="win311"] .taskbar-item .taskbar-item-icon,
body[data-theme-mode="win311"] .taskbar-item__icon,
body[data-theme-mode="win311"] .wm-taskbar-item > :first-child {
  width: 68px !important;
  height: 44px !important;
  margin: 0 auto 2px !important;
  background: #c0c0c0 !important;
  color: #000 !important;
  font-size: 24px !important;
  text-shadow: none !important;
  display: grid !important;
  place-items: center !important;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px -1px 0 #000000,
    inset  2px  2px 0 #dfdfdf,
    inset -2px -2px 0 #808080 !important;
  border-radius: 0 !important;
  border: 0 !important;
}

/* =========================================================================
   Landing / logo / glow removal
   ========================================================================= */
body[data-theme-mode="win311"] .logo,
body[data-theme-mode="win311"] .landing-panel,
body[data-theme-mode="win311"] .terminal,
body[data-theme-mode="win311"] .panel,
body[data-theme-mode="win311"] .card {
  text-shadow: none !important;
  border-radius: 0 !important;
  animation: none !important;
}
body[data-theme-mode="win311"] .landing-panel,
body[data-theme-mode="win311"] .terminal,
body[data-theme-mode="win311"] .panel {
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 0 !important;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px -1px 0 #000000,
    inset  2px  2px 0 #dfdfdf,
    inset -2px -2px 0 #808080 !important;
}

/* Terminal body: classic black DOS box inside the grey frame */
body[data-theme-mode="win311"] .terminal-body,
body[data-theme-mode="win311"] .terminal-output,
body[data-theme-mode="win311"] pre.terminal,
body[data-theme-mode="win311"] .console {
  background: #000 !important;
  color: #c0c0c0 !important;
  font-family: "Consolas","Courier New",monospace !important;
  text-shadow: none !important;
  border-radius: 0 !important;
  box-shadow:
    inset  1px  1px 0 #808080,
    inset -1px -1px 0 #ffffff,
    inset  2px  2px 0 #000000,
    inset -2px -2px 0 #dfdfdf !important;
}

/* =========================================================================
   Buttons across the admin (Chicago 3D buttons)
   ========================================================================= */
body[data-theme-mode="win311"] button:not(.wm-btn):not(.terminal-close):not(.settings-color):not(.bg-picker-item),
body[data-theme-mode="win311"] .btn,
body[data-theme-mode="win311"] input[type="button"],
body[data-theme-mode="win311"] input[type="submit"],
body[data-theme-mode="win311"] input[type="reset"] {
  background: #c0c0c0 !important;
  color: #000 !important;
  font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,sans-serif !important;
  font-size: 11px !important;
  padding: 3px 14px !important;
  min-width: 72px;
  min-height: 23px;
  border: 1px solid #000 !important;
  border-radius: 0 !important;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px -1px 0 #808080,
    inset  2px  2px 0 #dfdfdf,
    inset -2px -2px 0 #000000 !important;
  cursor: pointer;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: normal;
  animation: none !important;
}
body[data-theme-mode="win311"] button:not(.wm-btn):not(.terminal-close):not(.settings-color):not(.bg-picker-item):active,
body[data-theme-mode="win311"] .btn:active,
body[data-theme-mode="win311"] input[type="button"]:active,
body[data-theme-mode="win311"] input[type="submit"]:active,
body[data-theme-mode="win311"] input[type="reset"]:active {
  box-shadow:
    inset  1px  1px 0 #000000,
    inset -1px -1px 0 #ffffff,
    inset  2px  2px 0 #808080,
    inset -2px -2px 0 #dfdfdf !important;
  padding: 4px 13px 2px 15px !important;
}
body[data-theme-mode="win311"] button:not(.wm-btn):focus-visible {
  outline: 1px dotted #000 !important;
  outline-offset: -4px !important;
}

/* =========================================================================
   Inputs / textareas / selects — sunken white
   ========================================================================= */
body[data-theme-mode="win311"] input[type="text"],
body[data-theme-mode="win311"] input[type="email"],
body[data-theme-mode="win311"] input[type="password"],
body[data-theme-mode="win311"] input[type="number"],
body[data-theme-mode="win311"] input[type="search"],
body[data-theme-mode="win311"] input[type="url"],
body[data-theme-mode="win311"] input[type="tel"],
body[data-theme-mode="win311"] input[type="date"],
body[data-theme-mode="win311"] textarea,
body[data-theme-mode="win311"] select {
  background: #ffffff !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 2px 4px !important;
  font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,sans-serif !important;
  font-size: 11px !important;
  min-height: 19px;
  box-shadow:
    inset  1px  1px 0 #808080,
    inset -1px -1px 0 #ffffff,
    inset  2px  2px 0 #000000,
    inset -2px -2px 0 #dfdfdf !important;
  text-shadow: none !important;
}
body[data-theme-mode="win311"] input:focus,
body[data-theme-mode="win311"] textarea:focus,
body[data-theme-mode="win311"] select:focus {
  outline: 1px dotted #000 !important;
  outline-offset: -1px !important;
}

/* Checkbox + radio */
body[data-theme-mode="win311"] input[type="checkbox"],
body[data-theme-mode="win311"] input[type="radio"] {
  width: 13px !important; height: 13px !important;
  min-height: 13px !important;
  background: #fff !important;
  box-shadow:
    inset  1px  1px 0 #808080,
    inset -1px -1px 0 #ffffff,
    inset  2px  2px 0 #000000,
    inset -2px -2px 0 #dfdfdf !important;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding: 0 !important;
}
body[data-theme-mode="win311"] input[type="radio"] { border-radius: 50% !important; }
body[data-theme-mode="win311"] input[type="checkbox"]:checked::before {
  content: "✓"; display: grid; place-items: center;
  font-size: 10px; font-weight: bold; color: #000; line-height: 1;
  width: 100%; height: 100%;
}
body[data-theme-mode="win311"] input[type="radio"]:checked::before {
  content: ""; display: block;
  width: 4px; height: 4px;
  margin: 4px auto; border-radius: 50%;
  background: #000;
}

/* =========================================================================
   App content — unify EÜR / Rechnungen / Loops / Dashboard etc.
   ========================================================================= */

/* Kill colored backgrounds, glows, and animations inside app content */
body[data-theme-mode="win311"] .wm-window *,
body[data-theme-mode="win311"] [class*="-content"] *,
body[data-theme-mode="win311"] [class*="-form"] *,
body[data-theme-mode="win311"] [class*="-header"] *,
body[data-theme-mode="win311"] [class*="-tabs"] * {
  text-shadow: none !important;
  letter-spacing: 0 !important;
}

/* Typography inside windows — neutral bold/regular */
body[data-theme-mode="win311"] .wm-window h1,
body[data-theme-mode="win311"] .wm-window h2,
body[data-theme-mode="win311"] .wm-window h3,
body[data-theme-mode="win311"] .wm-window h4,
body[data-theme-mode="win311"] .wm-window h5,
body[data-theme-mode="win311"] .wm-window h6 {
  font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,sans-serif !important;
  color: #000 !important;
  text-shadow: none !important;
  font-weight: bold !important;
  margin: 8px 0 4px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body[data-theme-mode="win311"] .wm-window h1 { font-size: 14px !important; }
body[data-theme-mode="win311"] .wm-window h2 { font-size: 13px !important; }
body[data-theme-mode="win311"] .wm-window h3 { font-size: 12px !important; }
body[data-theme-mode="win311"] .wm-window h4,
body[data-theme-mode="win311"] .wm-window h5,
body[data-theme-mode="win311"] .wm-window h6 { font-size: 11px !important; }

body[data-theme-mode="win311"] .wm-window p,
body[data-theme-mode="win311"] .wm-window span,
body[data-theme-mode="win311"] .wm-window label,
body[data-theme-mode="win311"] .wm-window li,
body[data-theme-mode="win311"] .wm-window td,
body[data-theme-mode="win311"] .wm-window th,
body[data-theme-mode="win311"] .wm-window div {
  font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,sans-serif !important;
  font-size: 11px !important;
  color: #000 !important;
}

/* Window content root — reset any neon dashboard background */
body[data-theme-mode="win311"] .wm-body,
body[data-theme-mode="win311"] .wm-content,
body[data-theme-mode="win311"] .wm-window > div:not(.wm-header):not(.wm-titlebar) {
  background: #c0c0c0 !important;
  color: #000 !important;
  animation: none !important;
}

/* Links in apps */
body[data-theme-mode="win311"] .wm-window a {
  color: #000080 !important;
  text-decoration: underline;
  text-shadow: none !important;
}
body[data-theme-mode="win311"] .wm-window a:visited { color: #800080 !important; }

/* Tables — EÜR, Rechnungen, Loops */
body[data-theme-mode="win311"] table {
  background: #fff !important;
  color: #000 !important;
  border-collapse: collapse !important;
  border: 0 !important;
  font-size: 11px !important;
  font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,sans-serif !important;
  box-shadow:
    inset  1px  1px 0 #808080,
    inset -1px -1px 0 #ffffff,
    inset  2px  2px 0 #000000,
    inset -2px -2px 0 #dfdfdf !important;
}
body[data-theme-mode="win311"] thead {
  background: #c0c0c0 !important;
}
body[data-theme-mode="win311"] th {
  background: #c0c0c0 !important;
  color: #000 !important;
  font-weight: bold !important;
  text-align: left !important;
  padding: 3px 8px !important;
  border-right: 1px solid #808080 !important;
  border-bottom: 1px solid #808080 !important;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px -1px 0 #808080 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body[data-theme-mode="win311"] td {
  padding: 2px 8px !important;
  border: 0 !important;
  background: #fff !important;
  color: #000 !important;
}
body[data-theme-mode="win311"] tbody tr:hover td {
  background: #000080 !important;
  color: #fff !important;
}

/* Section headers inside apps (euer-header, rechnungen-header, etc.) */
body[data-theme-mode="win311"] [class$="-header"]:not(.wm-header):not(.window-header),
body[data-theme-mode="win311"] [class*="-header "]:not(.wm-header),
body[data-theme-mode="win311"] .section-header,
body[data-theme-mode="win311"] .toolbar,
body[data-theme-mode="win311"] [class*="-filter-bar"],
body[data-theme-mode="win311"] [class*="-actions"]:not(.actions-col) {
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 4px 6px !important;
  box-shadow: inset 0 -1px 0 #808080 !important;
  text-shadow: none !important;
  animation: none !important;
}

/* Tab row (euer-tabs, rechnungen-tabs) — container */
body[data-theme-mode="win311"] [class$="-tabs"]:not([class*="tab-content"]) {
  background: #c0c0c0 !important;
  box-shadow: inset 0 -1px 0 #808080 !important;
  padding: 2px 2px 0 !important;
  gap: 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Individual tab — raised Win3.x button that sinks into the page when active */
body[data-theme-mode="win311"] [class$="-tab"]:not([class*="tab-content"]):not([class*="tabs"]) {
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 4px 12px !important;
  font-family: inherit !important;
  font-size: 11px !important;
  min-width: auto !important;
  min-height: 20px !important;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px -1px 0 #808080,
    inset  0 -1px 0 #c0c0c0 !important;
  cursor: pointer;
  text-shadow: none !important;
  animation: none !important;
}
body[data-theme-mode="win311"] [class$="-tab"].active,
body[data-theme-mode="win311"] [class$="-tab"][aria-selected="true"] {
  background: #dfdfdf !important;
  font-weight: bold !important;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px 0 0 #808080 !important;
}

/* Stat cards / info boxes / panels — raised bevel */
body[data-theme-mode="win311"] [class*="-stat-card"],
body[data-theme-mode="win311"] [class$="-stat"],
body[data-theme-mode="win311"] [class*="-stats"] > div,
body[data-theme-mode="win311"] .stat-card,
body[data-theme-mode="win311"] .info-card,
body[data-theme-mode="win311"] .metric-card,
body[data-theme-mode="win311"] [class*="-category-item"] {
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 6px 8px !important;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px -1px 0 #808080 !important;
  animation: none !important;
  text-shadow: none !important;
}

/* Form groups / fieldsets (euer-form-group etc.) */
body[data-theme-mode="win311"] fieldset,
body[data-theme-mode="win311"] [class$="-form-group"],
body[data-theme-mode="win311"] [class$="-form-section"] {
  background: transparent !important;
  color: #000 !important;
  border: 1px solid #808080 !important;
  border-right-color: #fff !important;
  border-bottom-color: #fff !important;
  border-radius: 0 !important;
  padding: 10px !important;
  margin: 6px 0 !important;
  box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #808080 inset !important;
}
body[data-theme-mode="win311"] legend {
  font-weight: bold;
  padding: 0 4px;
  background: #c0c0c0;
  color: #000;
}

/* App-scoped custom buttons (euer-btn, rechnungen-btn, btn-sm etc.) */
body[data-theme-mode="win311"] [class$="-btn"]:not(.wm-btn):not(.terminal-close),
body[data-theme-mode="win311"] [class*="-btn-"]:not(.wm-btn):not(.terminal-close) {
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  border-radius: 0 !important;
  padding: 3px 12px !important;
  font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,sans-serif !important;
  font-size: 11px !important;
  min-height: 22px;
  min-width: auto !important;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px -1px 0 #808080,
    inset  2px  2px 0 #dfdfdf,
    inset -2px -2px 0 #000000 !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  animation: none !important;
  cursor: pointer;
}
body[data-theme-mode="win311"] [class$="-btn"]:not(.wm-btn):active,
body[data-theme-mode="win311"] [class*="-btn-"]:not(.wm-btn):active {
  box-shadow:
    inset  1px  1px 0 #000000,
    inset -1px -1px 0 #ffffff,
    inset  2px  2px 0 #808080,
    inset -2px -2px 0 #dfdfdf !important;
  padding: 4px 11px 2px 13px !important;
}

/* Status modifiers — keep semantics via text colour only, no neon bg */
body[data-theme-mode="win311"] .danger,
body[data-theme-mode="win311"] .error,
body[data-theme-mode="win311"] .negative {
  color: #800000 !important;
  background: transparent !important;
  text-shadow: none !important;
}
body[data-theme-mode="win311"] .positive,
body[data-theme-mode="win311"] .success,
body[data-theme-mode="win311"] .ok {
  color: #006000 !important;
  background: transparent !important;
  text-shadow: none !important;
}
body[data-theme-mode="win311"] .info,
body[data-theme-mode="win311"] .warning,
body[data-theme-mode="win311"] .pending {
  color: #000080 !important;
  background: transparent !important;
  text-shadow: none !important;
}

/* Chart bars (euer-bar, euer-bar-chart) — muted bevel look */
body[data-theme-mode="win311"] [class*="-bar-chart"] {
  background: #fff !important;
  box-shadow:
    inset  1px  1px 0 #808080,
    inset -1px -1px 0 #ffffff,
    inset  2px  2px 0 #000000,
    inset -2px -2px 0 #dfdfdf !important;
  padding: 10px !important;
}
body[data-theme-mode="win311"] [class*="-bar"]:not([class*="-chart"]):not([class*="-label"]):not([class*="-group"]) {
  background: #000080 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow:
    inset  1px  1px 0 #1084d0,
    inset -1px -1px 0 #000040 !important;
}

/* Grid/list containers (artikel-grid, kunden-grid, etc.) */
body[data-theme-mode="win311"] [class$="-grid"] {
  gap: 4px !important;
}
body[data-theme-mode="win311"] [class$="-grid"] > * {
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px -1px 0 #808080 !important;
  padding: 6px 8px !important;
  animation: none !important;
}

/* Modals / dialogs */
body[data-theme-mode="win311"] .modal,
body[data-theme-mode="win311"] .dialog,
body[data-theme-mode="win311"] .modal-content,
body[data-theme-mode="win311"] .dialog-content {
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px -1px 0 #000000,
    inset  2px  2px 0 #dfdfdf,
    inset -2px -2px 0 #808080 !important;
  text-shadow: none !important;
}
body[data-theme-mode="win311"] .modal-overlay,
body[data-theme-mode="win311"] .dialog-overlay {
  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: none !important;
}

/* Toast notifications */
body[data-theme-mode="win311"] .toast,
body[data-theme-mode="win311"] .notification {
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px -1px 0 #000000,
    inset  2px  2px 0 #dfdfdf,
    inset -2px -2px 0 #808080 !important;
  font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,sans-serif !important;
  font-size: 11px !important;
  text-shadow: none !important;
}

/* =========================================================================
   Login screen — reskin as a Win3.11 "Welcome to Windows for Workgroups"
   ========================================================================= */
body[data-theme-mode="win311"] #loginScreen {
  background: #c0c0c0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-width: 360px;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px -1px 0 #000000,
    inset  2px  2px 0 #dfdfdf,
    inset -2px -2px 0 #808080,
    4px 4px 0 rgba(0,0,0,0.35) !important;
  animation: none !important;
  z-index: 30;
}
body[data-theme-mode="win311"] #loginScreen::before {
  content: "Anmeldung — CorSch Workgroups";
  display: block;
  height: 18px;
  line-height: 18px;
  background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
  color: #fff;
  font-weight: bold;
  font-size: 11px;
  padding: 0 6px;
  text-align: left;
  user-select: none;
}
body[data-theme-mode="win311"] #loginScreen .login-matrix-container {
  padding: 14px 18px 16px !important;
  gap: 10px !important;
  align-items: stretch !important;
}

/* Hide ASCII logo in this preset (pixel art MS-style logo would need its own SVG;
   keeping the container slim is more authentic to Win3.x login dialogs) */
body[data-theme-mode="win311"] .login-ascii {
  display: none !important;
}

body[data-theme-mode="win311"] .login-matrix-box {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-width: auto !important;
  max-width: none !important;
  box-shadow: none !important;
}
body[data-theme-mode="win311"] .login-matrix-header {
  color: #000 !important;
  font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,sans-serif !important;
  font-size: 11px !important;
  font-weight: bold !important;
  text-align: left !important;
  text-shadow: none !important;
  border-bottom: 1px solid #808080 !important;
  border-top: 0 !important;
  padding: 0 0 6px !important;
  margin: 0 0 10px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  animation: none !important;
}
body[data-theme-mode="win311"] .login-cursor {
  display: none !important;
}
body[data-theme-mode="win311"] .login-matrix-field {
  display: grid !important;
  grid-template-columns: 90px 1fr !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}
body[data-theme-mode="win311"] .login-matrix-field label {
  color: #000 !important;
  font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,sans-serif !important;
  font-size: 11px !important;
  text-align: left !important;
  width: auto !important;
  text-shadow: none !important;
  font-weight: normal !important;
  letter-spacing: 0 !important;
}
body[data-theme-mode="win311"] .login-matrix-field input {
  background: #fff !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,sans-serif !important;
  font-size: 11px !important;
  padding: 2px 4px !important;
  min-height: 19px !important;
  box-shadow:
    inset  1px  1px 0 #808080,
    inset -1px -1px 0 #ffffff,
    inset  2px  2px 0 #000000,
    inset -2px -2px 0 #dfdfdf !important;
  text-shadow: none !important;
  transition: none !important;
}
body[data-theme-mode="win311"] .login-matrix-field input::placeholder {
  color: #808080 !important;
  font-size: 11px !important;
}
body[data-theme-mode="win311"] .login-matrix-status {
  color: #000 !important;
  font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,sans-serif !important;
  font-size: 11px !important;
  text-shadow: none !important;
  margin: 6px 0 !important;
  min-height: 15px !important;
  text-align: left !important;
}
body[data-theme-mode="win311"] .login-matrix-error {
  color: #800000 !important;
  font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,sans-serif !important;
  font-size: 11px !important;
  text-shadow: none !important;
  margin: 4px 0 !important;
  min-height: 15px !important;
  text-align: left !important;
}

/* Login button — Chicago button with default-state outline (enter key hint) */
body[data-theme-mode="win311"] .login-matrix-btn {
  width: auto !important;
  min-width: 75px !important;
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  border-radius: 0 !important;
  font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,sans-serif !important;
  font-size: 11px !important;
  font-weight: bold !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 4px 18px !important;
  margin: 10px 0 0 !important;
  cursor: pointer;
  text-shadow: none !important;
  transition: none !important;
  box-shadow:
    inset 0 0 0 1px #000000,
    inset  2px  2px 0 #ffffff,
    inset -2px -2px 0 #808080,
    inset  3px  3px 0 #dfdfdf,
    inset -3px -3px 0 #000000 !important;
}
body[data-theme-mode="win311"] .login-matrix-btn:hover {
  background: #c0c0c0 !important;
  color: #000 !important;
  box-shadow:
    inset 0 0 0 1px #000000,
    inset  2px  2px 0 #ffffff,
    inset -2px -2px 0 #808080,
    inset  3px  3px 0 #dfdfdf,
    inset -3px -3px 0 #000000 !important;
}
body[data-theme-mode="win311"] .login-matrix-btn:active {
  box-shadow:
    inset 0 0 0 1px #000000,
    inset  2px  2px 0 #000000,
    inset -2px -2px 0 #ffffff,
    inset  3px  3px 0 #808080,
    inset -3px -3px 0 #dfdfdf !important;
  padding: 5px 17px 3px 19px !important;
}

/* Container to align button row to the right (Win3.x dialog convention) */
body[data-theme-mode="win311"] #loginScreen .login-matrix-container > .login-matrix-btn {
  align-self: flex-end !important;
}

/* =========================================================================
   Inline-style overrides — target the many `style="background:#111..."`
   inline attributes baked into the admin apps (loops.js, euer.js,
   rechnungen.js, dashboard.js …). Needed because inline styles win
   specificity against class selectors.
   ========================================================================= */

/* Dark panels/cards (commonly #0a0a0a, #050505, #111, #1a1a1a, #1a1a2e, #222) */
body[data-theme-mode="win311"] [style*="background:#0"],
body[data-theme-mode="win311"] [style*="background: #0"],
body[data-theme-mode="win311"] [style*="background:#1"],
body[data-theme-mode="win311"] [style*="background: #1"],
body[data-theme-mode="win311"] [style*="background:#2"],
body[data-theme-mode="win311"] [style*="background: #2"],
body[data-theme-mode="win311"] [style*="background:#3"],
body[data-theme-mode="win311"] [style*="background: #3"],
body[data-theme-mode="win311"] [style*="background-color:#0"],
body[data-theme-mode="win311"] [style*="background-color: #0"],
body[data-theme-mode="win311"] [style*="background-color:#1"],
body[data-theme-mode="win311"] [style*="background-color: #1"] {
  background: #c0c0c0 !important;
  background-color: #c0c0c0 !important;
  color: #000 !important;
  border-color: #808080 !important;
  border-radius: 0 !important;
  text-shadow: none !important;
}

/* Form controls with inline dark bg → sunken white */
body[data-theme-mode="win311"] input[style*="background:#1"],
body[data-theme-mode="win311"] input[style*="background: #1"],
body[data-theme-mode="win311"] input[style*="background:#0"],
body[data-theme-mode="win311"] input[style*="background: #0"],
body[data-theme-mode="win311"] input[style*="background:#2"],
body[data-theme-mode="win311"] select[style*="background:#1"],
body[data-theme-mode="win311"] select[style*="background: #1"],
body[data-theme-mode="win311"] select[style*="background:#0"],
body[data-theme-mode="win311"] select[style*="background: #0"],
body[data-theme-mode="win311"] textarea[style*="background:#1"],
body[data-theme-mode="win311"] textarea[style*="background: #1"],
body[data-theme-mode="win311"] textarea[style*="background:#0"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 2px 4px !important;
  font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,sans-serif !important;
  font-size: 11px !important;
  min-height: 19px !important;
  box-shadow:
    inset  1px  1px 0 #808080,
    inset -1px -1px 0 #ffffff,
    inset  2px  2px 0 #000000,
    inset -2px -2px 0 #dfdfdf !important;
  text-shadow: none !important;
}

/* Buttons with inline dark bg (loops-refresh, loops-trigger, etc.) */
body[data-theme-mode="win311"] button[style*="background:#1"],
body[data-theme-mode="win311"] button[style*="background: #1"],
body[data-theme-mode="win311"] button[style*="background:#0"],
body[data-theme-mode="win311"] button[style*="background: #0"],
body[data-theme-mode="win311"] button[style*="background:#2"],
body[data-theme-mode="win311"] button[style*="background:#3"] {
  background: #c0c0c0 !important;
  background-color: #c0c0c0 !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  border-radius: 0 !important;
  font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,sans-serif !important;
  font-size: 11px !important;
  font-weight: normal !important;
  padding: 3px 12px !important;
  min-width: 72px;
  min-height: 22px;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px -1px 0 #808080,
    inset  2px  2px 0 #dfdfdf,
    inset -2px -2px 0 #000000 !important;
}
body[data-theme-mode="win311"] button[style*="background:#1"]:active,
body[data-theme-mode="win311"] button[style*="background:#0"]:active,
body[data-theme-mode="win311"] button[style*="background:#2"]:active {
  box-shadow:
    inset  1px  1px 0 #000000,
    inset -1px -1px 0 #ffffff,
    inset  2px  2px 0 #808080,
    inset -2px -2px 0 #dfdfdf !important;
}

/* Table rows with dark highlight (EÜR Summen-Zeile #1a1a2e) */
body[data-theme-mode="win311"] tr[style*="background:#1a1a2e"],
body[data-theme-mode="win311"] tr[style*="background: #1a1a2e"] {
  background: #dfdfdf !important;
  font-weight: bold !important;
  color: #000 !important;
}

/* Modal overlays with rgba dark → classic Win3.x modal backdrop */
body[data-theme-mode="win311"] [style*="rgba(0,0,0,0.7)"],
body[data-theme-mode="win311"] [style*="rgba(0, 0, 0, 0.7)"] {
  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Any div explicitly coloured with neon theme colours (--theme-color) */
body[data-theme-mode="win311"] [style*="color:#00dd44"],
body[data-theme-mode="win311"] [style*="color: #00dd44"],
body[data-theme-mode="win311"] [style*="color:#00ff"],
body[data-theme-mode="win311"] [style*="color: #00ff"],
body[data-theme-mode="win311"] [style*="color:#0f0"],
body[data-theme-mode="win311"] [style*="color: #0f0"],
body[data-theme-mode="win311"] [style*="color:#ddd"],
body[data-theme-mode="win311"] [style*="color: #ddd"],
body[data-theme-mode="win311"] [style*="color:#fff"]:not(.wm-header):not(.wm-title),
body[data-theme-mode="win311"] [style*="color: #fff"]:not(.wm-header):not(.wm-title),
body[data-theme-mode="win311"] [style*="color:#888"],
body[data-theme-mode="win311"] [style*="color: #888"] {
  color: #000 !important;
}

/* Terminal-like containers (loops.js main container: #0a0a0a + monospace + green) */
body[data-theme-mode="win311"] .wm-window [style*="font-family:\"Courier New\""],
body[data-theme-mode="win311"] .wm-window [style*="font-family: \"Courier New\""],
body[data-theme-mode="win311"] .wm-window [style*="font-family:'Courier New'"],
body[data-theme-mode="win311"] .wm-window [style*="Courier New"] {
  font-family: "Consolas","Courier New",monospace !important;
  background: #000 !important;
  color: #c0c0c0 !important;
  box-shadow:
    inset  1px  1px 0 #808080,
    inset -1px -1px 0 #ffffff,
    inset  2px  2px 0 #000000,
    inset -2px -2px 0 #dfdfdf !important;
}
/* But inside that terminal box, restore readable colours on nested controls */
body[data-theme-mode="win311"] .wm-window [style*="Courier New"] button,
body[data-theme-mode="win311"] .wm-window [style*="Courier New"] input,
body[data-theme-mode="win311"] .wm-window [style*="Courier New"] select {
  font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,sans-serif !important;
}

/* Borders set via inline style (commonly #333 or #444 dark-grey) */
body[data-theme-mode="win311"] [style*="border:1px solid #3"],
body[data-theme-mode="win311"] [style*="border: 1px solid #3"],
body[data-theme-mode="win311"] [style*="border:1px solid #4"],
body[data-theme-mode="win311"] [style*="border: 1px solid #4"],
body[data-theme-mode="win311"] [style*="border:1px solid #2"] {
  border-color: #808080 !important;
}

/* Border-radius inline — flatten */
body[data-theme-mode="win311"] [style*="border-radius"] {
  border-radius: 0 !important;
}

/* =========================================================================
   Authenticity overlay — matches Handoff v2 (2026-04-24)
   Shell conventions: no taskbar, naked minimized icons, no close button.
   ========================================================================= */

/* Window title-bar controls: hide any close (×) button. Authentic Win3.11
   had only minimize (▼) and maximize (▲); closing was done via system
   menu (left of titlebar). */
body[data-theme-mode="win311"] .wm-btn-close,
body[data-theme-mode="win311"] .wm-close,
body[data-theme-mode="win311"] .window-close,
body[data-theme-mode="win311"] [class*="close-button"],
body[data-theme-mode="win311"] .wm-header button[aria-label*="chließ" i],
body[data-theme-mode="win311"] .wm-header button[aria-label*="close" i],
body[data-theme-mode="win311"] .wm-header button[title*="chließ" i],
body[data-theme-mode="win311"] .wm-header button[title*="close" i],
body[data-theme-mode="win311"] .wm-titlebar button[aria-label*="chließ" i],
body[data-theme-mode="win311"] .wm-titlebar button[aria-label*="close" i],
body[data-theme-mode="win311"] .terminal-close {
  display: none !important;
}

/* System-menu symbol (left of titlebar) — authentic Win3.x "–"-glyph box.
   If the window manager doesn't already render a .wm-sys element we can't
   inject it from CSS, but when it exists this gives it the correct look. */
body[data-theme-mode="win311"] .wm-sys,
body[data-theme-mode="win311"] .wm-header .sys,
body[data-theme-mode="win311"] .wm-titlebar .sys {
  width: 18px !important; height: 14px !important;
  background: #c0c0c0 !important;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px -1px 0 #000000,
    inset  2px  2px 0 #dfdfdf,
    inset -2px -2px 0 #808080 !important;
  display: grid !important; place-items: center !important;
  cursor: pointer; border: 0 !important; border-radius: 0 !important;
  margin: 0 2px 0 0 !important;
  position: relative;
}
body[data-theme-mode="win311"] .wm-sys::before,
body[data-theme-mode="win311"] .wm-header .sys::before,
body[data-theme-mode="win311"] .wm-titlebar .sys::before {
  content: "";
  width: 10px; height: 3px;
  background: #000;
  display: block;
}

/* Minimized windows — naked 32×32 icons, no grey bevel box.
   Two variants kept in sync: top-level (.desk-min) on the teal desktop
   and MDI-group (.grp-min) inside Program Manager's client area. */
body[data-theme-mode="win311"] .desk-min,
body[data-theme-mode="win311"] .grp-min,
body[data-theme-mode="win311"] .w311-desktop-min,
body[data-theme-mode="win311"] .w311-group-min {
  width: auto !important;
  min-width: 64px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 2px 4px !important;
  text-align: center !important;
  cursor: pointer;
  user-select: none;
}
body[data-theme-mode="win311"] .desk-min .box,
body[data-theme-mode="win311"] .grp-min .box,
body[data-theme-mode="win311"] .w311-desktop-min__box,
body[data-theme-mode="win311"] .w311-group-min__box {
  width: 32px !important;
  height: 32px !important;
  margin: 0 auto 2px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 26px !important;
  color: #000 !important;
  text-shadow: none !important;
}
body[data-theme-mode="win311"] .desk-min .label,
body[data-theme-mode="win311"] .w311-desktop-min .w311-desktop-min__label,
body[data-theme-mode="win311"] .desk-min { /* top-level label text on teal desktop */
  font-size: 11px !important;
  color: #fff !important;
  text-shadow: 1px 1px 0 #000 !important;
}
body[data-theme-mode="win311"] .grp-min .label,
body[data-theme-mode="win311"] .w311-group-min .w311-group-min__label,
body[data-theme-mode="win311"] .grp-min { /* inside PM: black label on grey */
  font-size: 11px !important;
  color: #000 !important;
  text-shadow: none !important;
}

/* The old .taskbar-item grey-box style now only applies if the window
   manager renders minimized items outside .wm-taskbar (which is hidden
   above). Override it to match the new naked-icon convention. */
body[data-theme-mode="win311"] .taskbar-item,
body[data-theme-mode="win311"] .wm-taskbar-item,
body[data-theme-mode="win311"] .wm-minimized-item {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 2px 4px !important;
  flex-direction: column !important;
  color: #fff !important;
  text-shadow: 1px 1px 0 #000 !important;
}
body[data-theme-mode="win311"] .taskbar-item .taskbar-item-icon,
body[data-theme-mode="win311"] .taskbar-item__icon,
body[data-theme-mode="win311"] .wm-taskbar-item > :first-child,
body[data-theme-mode="win311"] .wm-minimized-item > :first-child {
  width: 32px !important;
  height: 32px !important;
  margin: 0 auto 2px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  font-size: 26px !important;
  color: #000 !important;
  text-shadow: none !important;
  display: grid !important;
  place-items: center !important;
}

/* Program Manager icon grid — usable standalone via .pm-grid/.pm-ic
   (parallel to the existing .w311-pm-* utility classes) */
.pm-grid {
  display: grid;
  grid-template-columns: repeat(5, 84px);
  grid-auto-rows: 72px;
  padding: 8px;
  align-content: start;
}
.pm-ic {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 4px 2px;
  cursor: pointer; user-select: none; text-align: center;
  color: #000;
}
.pm-ic .glyph {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  font-size: 24px;
}
.pm-ic .lbl {
  font-size: 11px;
  max-width: 78px;
  line-height: 1.1;
}
.pm-ic.selected .lbl {
  background: #000080;
  color: #fff;
  padding: 0 2px;
  outline: 1px dotted #000;
}

/* =========================================================================
   Tabs → Radio-groups (upgrade applied by /js/ui/win311-tabs.js)
   Original tab strip is hidden; a fieldset.win311-tabs-radios is rendered
   in its place with one radio per tab. Clicking a radio forwards to the
   hidden tab's click handler, so the app's tab logic is unchanged.
   ========================================================================= */
body[data-theme-mode="win311"] [class$="-tabs"][data-win311-tabs-upgrade] {
  display: none !important;
}
body[data-theme-mode="win311"] .win311-tabs-radios {
  background: transparent;
  border: 1px solid #808080;
  border-right-color: #fff;
  border-bottom-color: #fff;
  box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #808080 inset;
  padding: 12px 12px 10px;
  margin: 6px 0 10px;
  position: relative;
  font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,sans-serif;
  font-size: 11px;
  color: #000;
}
body[data-theme-mode="win311"] .win311-tabs-radios > legend {
  padding: 0 4px;
  background: #c0c0c0;
  font-weight: bold;
  font-size: 11px;
  margin-left: 6px;
}
body[data-theme-mode="win311"] .win311-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
}
body[data-theme-mode="win311"] .win311-radio-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  color: #000;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}
body[data-theme-mode="win311"] .win311-radio-item input[type="radio"] {
  margin: 0;
}

/* If a non-themed stylesheet happens to show the shadow fieldset, hide it. */
html:not([data-theme-mode="win311"]) body:not([data-theme-mode="win311"]) .win311-tabs-radios {
  display: none !important;
}

/* =========================================================================
   Mail app — 2-pane MDI (Microsoft Mail for Windows Workgroups)
   Folders pane on the left, Inbox pane on the right, no preview pane.
   Opening a message pops a modal (handled by /js/ui/win311-mail.js).
   ========================================================================= */
body[data-theme-mode="win311"] .email-reader,
body[data-theme-mode="win311"] #emailReaderPanel {
  display: none !important;
}
body[data-theme-mode="win311"] .email-layout {
  display: grid !important;
  grid-template-columns: 220px 1fr !important;
  gap: 10px !important;
  padding: 10px !important;
  background: #008080 !important;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 2px) !important;
  height: 100% !important;
}
body[data-theme-mode="win311"] .email-sidebar,
body[data-theme-mode="win311"] .email-list-panel {
  background: #c0c0c0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 2px !important;
  padding-top: 20px !important; /* leave room for the fake titlebar ::before */
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #000000,
    inset 2px 2px 0 #dfdfdf,
    inset -2px -2px 0 #808080 !important;
}
body[data-theme-mode="win311"] .email-sidebar::before,
body[data-theme-mode="win311"] .email-list-panel::before {
  content: "";
  position: absolute; left: 2px; right: 2px; top: 2px;
  height: 18px;
  background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
  color: #fff;
  font-weight: bold;
  font-size: 11px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  box-sizing: border-box;
  font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,sans-serif;
}
body[data-theme-mode="win311"] .email-sidebar::before {
  content: "Private Ordner";
}
body[data-theme-mode="win311"] .email-list-panel::before {
  content: "Posteingang";
}
body[data-theme-mode="win311"] .email-sidebar {
  font-size: 11px;
}
body[data-theme-mode="win311"] .email-sidebar .email-folder {
  padding: 3px 6px;
  color: #000 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer;
}
body[data-theme-mode="win311"] .email-sidebar .email-folder.active {
  background: #000080 !important;
  color: #fff !important;
  outline: 1px dotted #000;
}
body[data-theme-mode="win311"] .email-list-toolbar {
  background: #c0c0c0 !important;
  padding: 3px 4px !important;
  box-shadow: inset 0 -1px 0 #808080 !important;
  border: 0 !important;
}

/* =========================================================================
   Misc chrome kills — ensure nothing flashy leaks through
   ========================================================================= */
body[data-theme-mode="win311"] * {
  text-rendering: optimizeSpeed;
}
body[data-theme-mode="win311"] .crt-effect,
body[data-theme-mode="win311"] .scanlines,
body[data-theme-mode="win311"] .crt {
  display: none !important;
}

/* Scrollbars — Win3.x style */
body[data-theme-mode="win311"] ::-webkit-scrollbar {
  width: 16px; height: 16px;
}
body[data-theme-mode="win311"] ::-webkit-scrollbar-track {
  background: #c0c0c0;
  background-image:
    repeating-conic-gradient(#c0c0c0 0% 25%, #dfdfdf 0% 50%);
  background-size: 2px 2px;
  box-shadow:
    inset  1px  1px 0 #808080,
    inset -1px -1px 0 #ffffff;
}
body[data-theme-mode="win311"] ::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px -1px 0 #000000,
    inset  2px  2px 0 #dfdfdf,
    inset -2px -2px 0 #808080;
  border: 0;
}
body[data-theme-mode="win311"] ::-webkit-scrollbar-corner {
  background: #c0c0c0;
}

/* =========================================================================
   Standalone w311-* classes — available for future Program Manager landing
   (ported 1:1 from preview/windows-311.html).
   Not scoped to data-theme-mode so they can be used inside any preset
   ========================================================================= */

.w311-raised {
  background: #c0c0c0;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px -1px 0 #000000,
    inset  2px  2px 0 #dfdfdf,
    inset -2px -2px 0 #808080;
}
.w311-sunken {
  background: #c0c0c0;
  box-shadow:
    inset  1px  1px 0 #808080,
    inset -1px -1px 0 #ffffff,
    inset  2px  2px 0 #000000,
    inset -2px -2px 0 #dfdfdf;
}
.w311-desktop {
  position: fixed; inset: 0;
  background: #008080;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 2px);
}
.w311-window {
  background: #c0c0c0;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px -1px 0 #000000,
    inset  2px  2px 0 #dfdfdf,
    inset -2px -2px 0 #808080;
  display: flex; flex-direction: column;
  padding: 2px;
}
.w311-titlebar {
  height: 18px;
  background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
  color: #fff; font-weight: bold; font-size: 11px;
  display: flex; align-items: center;
  padding: 0 2px; user-select: none;
}
.w311-titlebar--inactive { background: #808080; color: #c0c0c0; }
.w311-titlebar__title {
  flex: 1; padding: 0 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center;
}
.w311-titlebar__sys {
  width: 18px; height: 14px;
  background: #c0c0c0;
  box-shadow:
    inset  1px  1px 0 #ffffff, inset -1px -1px 0 #000000,
    inset  2px  2px 0 #dfdfdf, inset -2px -2px 0 #808080;
  display: grid; place-items: center; cursor: pointer;
}
.w311-titlebar__sys::before {
  content: ""; width: 10px; height: 3px; background: #000;
}
.w311-titlebar__btns { display: flex; }
.w311-titlebar__btn {
  width: 16px; height: 14px;
  background: #c0c0c0; color: #000;
  box-shadow:
    inset  1px  1px 0 #ffffff, inset -1px -1px 0 #000000,
    inset  2px  2px 0 #dfdfdf, inset -2px -2px 0 #808080;
  display: grid; place-items: center;
  font-size: 10px; line-height: 1;
  cursor: pointer; padding: 0; border: 0;
  font-family: "MS Sans Serif", sans-serif;
}
.w311-titlebar__btn:active {
  box-shadow:
    inset  1px  1px 0 #808080, inset -1px -1px 0 #ffffff,
    inset  2px  2px 0 #000000, inset -2px -2px 0 #dfdfdf;
}
.w311-menubar {
  display: flex; background: #c0c0c0;
  padding: 2px; gap: 2px; font-size: 11px;
  box-shadow: inset 0 -1px 0 #808080;
}
.w311-menubar__item { padding: 2px 8px; cursor: pointer; color: #000; }
.w311-menubar__item:hover { background: #000080; color: #fff; }
.w311-menubar__item u { text-decoration: underline; }
.w311-body { flex: 1; position: relative; overflow: hidden; }
.w311-btn {
  background: #c0c0c0; color: #000;
  font-family: "MS Sans Serif", sans-serif; font-size: 11px;
  padding: 3px 14px; min-width: 72px; min-height: 23px;
  border: 1px solid #000;
  box-shadow:
    inset  1px  1px 0 #ffffff, inset -1px -1px 0 #808080,
    inset  2px  2px 0 #dfdfdf, inset -2px -2px 0 #000000;
  cursor: pointer;
}
.w311-btn:focus { outline: 1px dotted #000; outline-offset: -4px; }
.w311-btn:active {
  box-shadow:
    inset  1px  1px 0 #000000, inset -1px -1px 0 #ffffff,
    inset  2px  2px 0 #808080, inset -2px -2px 0 #dfdfdf;
  padding: 4px 13px 2px 15px;
}
.w311-btn--default {
  box-shadow:
    inset 0 0 0 1px #000000,
    inset  2px  2px 0 #ffffff, inset -2px -2px 0 #808080,
    inset  3px  3px 0 #dfdfdf, inset -3px -3px 0 #000000;
}
.w311-pm-grid {
  display: grid;
  grid-template-columns: repeat(5, 84px);
  grid-auto-rows: 72px;
  padding: 8px; align-content: start;
}
.w311-pm-icon {
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  padding: 4px 2px; cursor: pointer; user-select: none;
  color: #000;
}
.w311-pm-icon__glyph { width: 32px; height: 32px; display: grid; place-items: center; }
.w311-pm-icon__label {
  font-size: 11px; text-align: center; max-width: 76px;
  white-space: nowrap; color: #000;
}
.w311-pm-icon--selected .w311-pm-icon__label {
  background: #000080; color: #fff;
  padding: 0 2px; outline: 1px dotted #000;
}
.w311-group-min { width: 76px; text-align: center; color: #000; cursor: pointer; font-size: 11px; padding: 2px; }
.w311-group-min__box {
  width: 64px; height: 42px; margin: 0 auto 2px;
  background: #c0c0c0;
  box-shadow:
    inset  1px  1px 0 #ffffff, inset -1px -1px 0 #000000,
    inset  2px  2px 0 #dfdfdf, inset -2px -2px 0 #808080;
  display: grid; place-items: center;
}
.w311-mdi {
  position: absolute; background: #c0c0c0;
  box-shadow:
    inset  1px  1px 0 #ffffff, inset -1px -1px 0 #000000,
    inset  2px  2px 0 #dfdfdf, inset -2px -2px 0 #808080;
  padding: 2px; display: flex; flex-direction: column;
}
.w311-input {
  font-family: "MS Sans Serif", sans-serif; font-size: 11px;
  padding: 2px 4px; background: #fff; border: 0;
  box-shadow:
    inset  1px  1px 0 #808080, inset -1px -1px 0 #ffffff,
    inset  2px  2px 0 #000000, inset -2px -2px 0 #dfdfdf;
  color: #000; outline: none;
  min-height: 19px; width: 100%;
}
.w311-group {
  border: 1px solid #808080;
  border-right-color: #fff; border-bottom-color: #fff;
  box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #808080 inset;
  padding: 12px 10px 10px; margin: 8px 0;
  position: relative;
}
.w311-group__legend {
  position: absolute; top: -6px; left: 8px;
  background: #c0c0c0; padding: 0 4px;
  font-size: 11px; font-weight: bold;
}
.w311-desktop-minimized {
  position: absolute; bottom: 8px; left: 8px; right: 8px;
  display: flex; gap: 8px; align-items: flex-end;
}
.w311-desktop-min {
  width: 84px; text-align: center;
  color: #fff; font-size: 11px; cursor: pointer;
  text-shadow: 1px 1px 0 #000; user-select: none;
}
.w311-desktop-min__box {
  width: 68px; height: 44px; margin: 0 auto 2px;
  background: #c0c0c0;
  box-shadow:
    inset  1px  1px 0 #ffffff, inset -1px -1px 0 #000000,
    inset  2px  2px 0 #dfdfdf, inset -2px -2px 0 #808080;
  display: grid; place-items: center;
}

/* =========================================================================
   HANDOFF v2 (2026-04-24) — Authenticity layer
   ------------------------------------------------------------------------
   Implements the Win3.11 shell conventions from the v2 design package:
   - Program Manager as a full-viewport MDI shell (Points 10 + 12)
   - System menu dropdown replaces the close button (Point 11)
   - Force-overrides for dark inline styles from admin apps (Point 9)
   All rules are !important and appended at the tail so they win over the
   older rules above. Scoped to body[data-theme-mode="win311"] + dedicated
   classes to stay out of other themes' way.
   ========================================================================= */

/* --------- 10 + 12: Program Manager shell fills the viewport ------------- */
body[data-theme-mode="win311"] .pm-shell {
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  padding: 2px !important;
  z-index: 10 !important;
  background: #c0c0c0 !important;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px -1px 0 #000000,
    inset  2px  2px 0 #dfdfdf,
    inset -2px -2px 0 #808080 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
body[data-theme-mode="win311"] .pm-shell > .pm-body,
body[data-theme-mode="win311"] .pm-workspace {
  flex: 1;
  position: relative;
  background: #008080 !important;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 2px) !important;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
  overflow: visible;
}

/* Hide only the visual desktop decoration (icons + widgets) inside the
   Win3.11 shell. #desktop itself stays in the DOM / visible stack — we
   only mark it visibility:hidden via the rule further down, so the
   contextmenu handler attached to it still receives events. */
body[data-theme-mode="win311"] .desktop-icon,
body[data-theme-mode="win311"] .desktop-folder,
body[data-theme-mode="win311"] .weather-widget,
body[data-theme-mode="win311"] .widget-weather,
body[data-theme-mode="win311"] .visitor-counter,
body[data-theme-mode="win311"] #visitorCounter,
body[data-theme-mode="win311"] .desktop-widget,
body[data-theme-mode="win311"] [class*="calendar-widget"] {
  display: none !important;
}

/* PM icons — authentic Win3.11 look: transparent label with just glyph +
   text, NOT a raised bevel box. The generic `[class$="-grid"] > *` rule
   above turns them into bevel cards; we override that explicitly. */
body[data-theme-mode="win311"] .pm-ic,
body[data-theme-mode="win311"] .pm-grid,
body[data-theme-mode="win311"] .pm-grid * {
  pointer-events: auto !important;
}
body[data-theme-mode="win311"] .pm-grid > .pm-ic,
body[data-theme-mode="win311"] .pm-ic {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 4px 2px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  position: relative;
  z-index: 2;
  color: #000 !important;
  text-align: center !important;
  cursor: pointer !important;
  user-select: none;
  text-shadow: none !important;
}
body[data-theme-mode="win311"] .pm-ic .glyph {
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 24px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #000 !important;
  text-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}
body[data-theme-mode="win311"] .pm-ic .lbl {
  font-size: 11px !important;
  max-width: 80px !important;
  line-height: 1.1 !important;
  color: #000 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 2px !important;
  text-shadow: none !important;
}
body[data-theme-mode="win311"] .pm-ic.selected .lbl {
  background: #000080 !important;
  color: #fff !important;
  outline: 1px dotted #000;
  padding: 0 2px !important;
}

/* Hauptgruppe MDI body must scroll internally, not clip pm-grid */
body[data-theme-mode="win311"] #win311HomeGroup .mdi-body {
  overflow: auto !important;
  position: relative;
}
/* Hauptgruppe title bar (draggable) */
body[data-theme-mode="win311"] .pm-workspace .mdi > .wm-header {
  cursor: move;
}
/* Ensure the PM shell sits below modal overlays (settings etc. at z:175/180) */
body[data-theme-mode="win311"] #settingsPanel,
body[data-theme-mode="win311"] .settings-overlay,
body[data-theme-mode="win311"] #contextMenu,
body[data-theme-mode="win311"] #desktopContextMenu,
body[data-theme-mode="win311"] .sysmenu {
  z-index: 10000 !important;
}

/* PM menubar dropdowns */
body[data-theme-mode="win311"] .pm-menu-dropdown {
  position: absolute;
  min-width: 180px;
  background: #c0c0c0;
  padding: 2px;
  font-size: 11px;
  font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,sans-serif;
  color: #000;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #000000,
    inset 2px 2px 0 #dfdfdf,
    inset -2px -2px 0 #808080,
    2px 2px 0 rgba(0,0,0,0.35);
  z-index: 9999;
}
body[data-theme-mode="win311"] .pm-menu-dropdown .item {
  padding: 3px 22px 3px 24px;
  cursor: default;
  color: #000;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
body[data-theme-mode="win311"] .pm-menu-dropdown .item:hover:not(.disabled) {
  background: #000080;
  color: #fff;
}
body[data-theme-mode="win311"] .pm-menu-dropdown .item.disabled {
  color: #808080;
}
body[data-theme-mode="win311"] .pm-menu-dropdown .sep {
  height: 0;
  margin: 2px 0;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #ffffff;
}
body[data-theme-mode="win311"] .menubar .item.open {
  background: #000080;
  color: #fff;
}

/* Keep the legacy desktop host alive so contextmenu + icons-on-desktop
   widgets still work under the PM shell. It's hidden but clickable. */
body[data-theme-mode="win311"] #desktop {
  display: block !important;
  visibility: hidden !important;
}

/* Menubar below the PM title bar */
body[data-theme-mode="win311"] .pm-shell .menubar,
body[data-theme-mode="win311"] .w311-menubar {
  display: flex;
  background: #c0c0c0;
  padding: 1px 2px;
  gap: 0;
  box-shadow: inset 0 -1px 0 #808080;
  font-size: 11px;
  height: 20px;
  align-items: center;
  color: #000;
  user-select: none;
}
body[data-theme-mode="win311"] .pm-shell .menubar .item,
body[data-theme-mode="win311"] .w311-menubar .item {
  padding: 2px 10px;
  cursor: default;
  color: #000;
}
body[data-theme-mode="win311"] .pm-shell .menubar .item:hover,
body[data-theme-mode="win311"] .w311-menubar .item:hover {
  background: #000080;
  color: #fff;
}
body[data-theme-mode="win311"] .pm-shell .menubar u,
body[data-theme-mode="win311"] .w311-menubar u { text-decoration: underline; }

/* MDI child windows inside the PM workspace */
body[data-theme-mode="win311"] .pm-workspace .mdi,
body[data-theme-mode="win311"] .pm-workspace .wm-window {
  position: absolute !important;
  background: #c0c0c0 !important;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px -1px 0 #000000,
    inset  2px  2px 0 #dfdfdf,
    inset -2px -2px 0 #808080 !important;
  padding: 2px !important;
  display: flex !important;
  flex-direction: column !important;
}
body[data-theme-mode="win311"] .pm-workspace .mdi.maximized,
body[data-theme-mode="win311"] .pm-workspace .wm-window.maximized {
  left: 0 !important; top: 0 !important;
  width: 100% !important; height: 100% !important;
}
body[data-theme-mode="win311"] .pm-workspace .mdi.minimized,
body[data-theme-mode="win311"] .pm-workspace .wm-window.minimized {
  display: none !important;
}

/* Minimized tray at the bottom of the PM workspace */
body[data-theme-mode="win311"] .min-tray {
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  min-height: 56px;
  padding: 8px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  pointer-events: none;
  z-index: 30;
}
body[data-theme-mode="win311"] .min-tray .min-item {
  pointer-events: auto;
  width: 82px;
  text-align: center;
  cursor: default;
  user-select: none;
}
body[data-theme-mode="win311"] .min-tray .min-item .glyph {
  width: 32px; height: 32px;
  margin: 0 auto 2px;
  display: grid; place-items: center;
  font-size: 26px;
  background: transparent;
  color: #000;
  text-shadow: none;
}
body[data-theme-mode="win311"] .min-tray .min-item .lbl {
  font-size: 11px;
  color: #ffffff;
  text-shadow: 1px 1px 0 #000000;
  line-height: 1.1;
  word-wrap: break-word;
}
body[data-theme-mode="win311"] .min-tray .min-item.selected .lbl {
  background: #000080;
  color: #ffffff;
  text-shadow: none;
  padding: 0 2px;
  outline: 1px dotted #ffffff;
}

/* --------- 11: System menu dropdown (replaces × close button) ----------- */
body[data-theme-mode="win311"] .sysmenu {
  position: absolute;
  min-width: 180px;
  background: #c0c0c0;
  padding: 2px;
  color: #000;
  font-size: 11px;
  font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,sans-serif;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px -1px 0 #000000,
    inset  2px  2px 0 #dfdfdf,
    inset -2px -2px 0 #808080,
    2px 2px 0 rgba(0,0,0,0.35);
  z-index: 10000;
  user-select: none;
}
body[data-theme-mode="win311"] .sysmenu-item {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 3px 22px 3px 24px;
  cursor: default;
  color: #000;
  white-space: nowrap;
}
body[data-theme-mode="win311"] .sysmenu-item u { text-decoration: underline; }
body[data-theme-mode="win311"] .sysmenu-item .accel {
  color: inherit;
  opacity: 0.9;
  margin-left: 24px;
}
body[data-theme-mode="win311"] .sysmenu-item:hover:not(.disabled) {
  background: #000080;
  color: #fff;
}
body[data-theme-mode="win311"] .sysmenu-item.disabled {
  color: #808080;
  cursor: not-allowed;
}
body[data-theme-mode="win311"] .sysmenu-sep {
  height: 0;
  margin: 2px 0;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #ffffff;
}

/* --------- 9: Force-override dark inline styles from admin apps --------- */
/* The admin apps (EÜR, Rechnungen, Backlog, PM2 …) set inline dark
   backgrounds and white/neon text. In Win3.11 every content surface MUST
   be grey bevel + black text, regardless of inline style. These rules
   are intentionally broad and placed last. */

body[data-theme-mode="win311"] .wm-window [class*="form"]:not(input):not(select):not(textarea):not(.win311-tabs-radios):not([class*="tab"]),
body[data-theme-mode="win311"] .wm-window [class*="panel"],
body[data-theme-mode="win311"] .wm-window [class*="card"],
body[data-theme-mode="win311"] .wm-window [class*="section"],
body[data-theme-mode="win311"] .wm-window [class*="container"]:not(body):not(html),
body[data-theme-mode="win311"] .wm-window [class*="wrapper"] {
  background-color: #c0c0c0 !important;
  background-image: none !important;
  color: #000 !important;
}

/* Force black text on labels, headings, paragraphs, spans, divs inside windows */
body[data-theme-mode="win311"] .wm-window label,
body[data-theme-mode="win311"] .wm-window legend,
body[data-theme-mode="win311"] .wm-window p,
body[data-theme-mode="win311"] .wm-window dt,
body[data-theme-mode="win311"] .wm-window dd {
  color: #000 !important;
}

/* Inputs/selects/textareas: sunken white with black text, even when
   the admin app set a dark inline background. */
body[data-theme-mode="win311"] .wm-window input:not([type="radio"]):not([type="checkbox"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
body[data-theme-mode="win311"] .wm-window select,
body[data-theme-mode="win311"] .wm-window textarea {
  background: #ffffff !important;
  color: #000 !important;
  border: 0 !important;
  box-shadow:
    inset  1px  1px 0 #808080,
    inset -1px -1px 0 #ffffff,
    inset  2px  2px 0 #000000,
    inset -2px -2px 0 #dfdfdf !important;
  padding: 2px 4px !important;
  font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,sans-serif !important;
  font-size: 11px !important;
}

/* Icon buttons in table rows: force black glyph */
body[data-theme-mode="win311"] .wm-window [class*="action-btn"],
body[data-theme-mode="win311"] .wm-window [class*="icon-btn"] {
  color: #000 !important;
  background: #c0c0c0 !important;
}
body[data-theme-mode="win311"] .wm-window button svg,
body[data-theme-mode="win311"] .wm-window .btn svg,
body[data-theme-mode="win311"] .wm-window [class*="action-btn"] svg,
body[data-theme-mode="win311"] .wm-window [class*="icon-btn"] svg {
  fill: #000 !important;
  stroke: currentColor;
}

/* Table rows + footer — kill admin-set dark footer backgrounds */
body[data-theme-mode="win311"] .wm-window tfoot,
body[data-theme-mode="win311"] .wm-window tfoot tr,
body[data-theme-mode="win311"] .wm-window tfoot td,
body[data-theme-mode="win311"] .wm-window [class*="table-footer"],
body[data-theme-mode="win311"] .wm-window [class*="summary-row"] {
  background: #c0c0c0 !important;
  color: #000 !important;
  font-weight: bold;
  border-top: 1px solid #808080 !important;
}
body[data-theme-mode="win311"] .wm-window tr.selected,
body[data-theme-mode="win311"] .wm-window tr.selected td,
body[data-theme-mode="win311"] .wm-window li.selected {
  background: #000080 !important;
  color: #ffffff !important;
}

/* Group boxes / fieldsets — grey face regardless of inline style */
body[data-theme-mode="win311"] .wm-window fieldset,
body[data-theme-mode="win311"] .wm-window [class*="group-box"],
body[data-theme-mode="win311"] .wm-window [class*="fieldset"] {
  background: #c0c0c0 !important;
  border: 1px solid #808080 !important;
  border-top-color: #808080 !important;
  border-left-color: #808080 !important;
  border-right-color: #ffffff !important;
  border-bottom-color: #ffffff !important;
  color: #000 !important;
}

/* Radio/checkbox labels — ensure black text */
body[data-theme-mode="win311"] .wm-window input[type="radio"] + *,
body[data-theme-mode="win311"] .wm-window input[type="checkbox"] + *,
body[data-theme-mode="win311"] .wm-window label:has(input[type="radio"]),
body[data-theme-mode="win311"] .wm-window label:has(input[type="checkbox"]) {
  color: #000 !important;
  background: transparent !important;
}

/* Stat cards / KPI boxes — raised bevel, black text */
body[data-theme-mode="win311"] .wm-window [class*="stat"]:not(.statusbar):not([class*="status"]),
body[data-theme-mode="win311"] .wm-window [class*="kpi"],
body[data-theme-mode="win311"] .wm-window [class*="metric"] {
  background: #c0c0c0 !important;
  color: #000 !important;
  box-shadow:
    inset  1px  1px 0 #ffffff,
    inset -1px -1px 0 #808080 !important;
}

/* Kill Matrix-green leftovers from inline styles */
body[data-theme-mode="win311"] [style*="color: #00ff"],
body[data-theme-mode="win311"] [style*="color:#00ff"],
body[data-theme-mode="win311"] [style*="color: lime"],
body[data-theme-mode="win311"] [style*="color: rgb(0, 255"] {
  color: #000 !important;
}

/* Kill white text on dark inline styles inside windows */
body[data-theme-mode="win311"] .wm-window [style*="color: #fff"],
body[data-theme-mode="win311"] .wm-window [style*="color:#fff"],
body[data-theme-mode="win311"] .wm-window [style*="color: white"],
body[data-theme-mode="win311"] .wm-window [style*="color: rgb(255, 255, 255)"] {
  color: #000 !important;
}

/* App-specific selectors (EÜR/Rechnungen/Backlog/PM2/Sicherheit
   form wrappers) — covered by the wildcard rules above, but pinned
   here for clarity and to beat very specific admin-app selectors. */
body[data-theme-mode="win311"] .eur-form,
body[data-theme-mode="win311"] .eur-form-section,
body[data-theme-mode="win311"] .eur-field,
body[data-theme-mode="win311"] .eur-row,
body[data-theme-mode="win311"] .eur-table,
body[data-theme-mode="win311"] .eur-table-footer,
body[data-theme-mode="win311"] .rechnungen-form,
body[data-theme-mode="win311"] .rechnungen-section,
body[data-theme-mode="win311"] .backlog-panel,
body[data-theme-mode="win311"] .pm2-panel,
body[data-theme-mode="win311"] .sicherheit-panel {
  background: #c0c0c0 !important;
  color: #000 !important;
}