/* =========================================================
   Global Basics
   ========================================================= */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  font-family: 'Roboto', sans-serif;
}

/* =========================================================
   Validation / Forms
   ========================================================= */
h1:focus {
  outline: none;
}

.valid.modified:not([type=checkbox]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid #e50000;
}

.validation-message {
  color: #e50000;
}

.darker-border-checkbox.form-check-input {
  border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* =========================================================
   Error UI (Blazor)
   ========================================================= */
.blazor-error-boundary {
  background: #b32121;
  color: white;
  padding: 1rem;
}

  .blazor-error-boundary::after {
    content: "An error has occurred.";
  }

/* =========================================================
   Panels / Sticky Helpers
   ========================================================= */
.article-form-panel {
  position: sticky;
  top: 80px;
  align-self: flex-start;
}

/* =========================================================
   IMPORTANT:
   ❌ KEINE MudBlazor Layout Overrides!
   ❌ KEIN position: fixed für AppBar / Drawer
   ❌ KEIN margin-left / margin-top für mud-main-content
   ========================================================= */

/* MudBlazor steuert AppBar, Drawer & MainContent vollständig */

/* Username visibility in AppBar */
.appbar-username {
  white-space: nowrap;
}

@media (max-width: 960px) {
  .appbar-username {
    display: none !important;
  }
}

/* =========================================================
   RDR2 Map Styles
   ========================================================= */
.map-wrapper {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
  background: #1a1a1a;
  border: 2px solid #333;
  border-radius: 8px;
}

.map-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  transition: transform 0.2s ease;
  cursor: crosshair;
}

.map-image {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  pointer-events: all;
}

.map-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.map-control-btn {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.map-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 5;
  transition: transform 0.1s ease;
}

.map-marker:hover {
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 6;
}

.marker-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}