/* ==========================================================
   PXnet → Pixel3DLab HUD BRIDGE (Override)  [v2]
   Ziel: style.css komplett ersetzen, Purple-Look entfernen,
   PXnet-Klassen auf Pixel3DLab HUD ummappen.
========================================================== */

/* ----------------------------------------------------------
   0) PXnet Design-Tokens auf HUD Variablen mappen (KORREKT)
   WICHTIG: Keine Selbstreferenzen wie --bg: var(--bg)
---------------------------------------------------------- */
:root{
  /* PXnet-Variablen */
  --bg: var(--bg, #f3f8ff);                 /* fallback */
  --bg-alt: var(--hud-white, #ffffff);

  --card-bg: var(--hud-white, #ffffff);
  --sidebar-bg: var(--hud-card, #ffffff);

  --text: #222;
  --text-light: rgba(0,0,0,.65);

  --border: var(--hud-border, #00000022);
  --shadow-soft: var(--hud-shadow);
  --shadow-strong: var(--hud-shadow);

  --radius: var(--hud-radius, 16px);

  /* Akzente */
  --accent: var(--hud-blue);
  --accent-2: var(--hud-purple);
  --accent-warn: var(--hud-yellow);
  --accent-ok: var(--hud-green);
}

/* ----------------------------------------------------------
   1) Dark Mode: dashboard.css nutzt html.dark -> :root.dark
   (Wenn du html.dark korrekt setzt, reicht das hier.)
   Optional: sichere Textfarbe im Dark Mode
---------------------------------------------------------- */
html.dark body{
  color: #f2f4f8;
}

/* ----------------------------------------------------------
   2) Basis / Layout
---------------------------------------------------------- */
*,
*::before,
*::after{
  box-sizing: border-box;
}

body{
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", system-ui;
  background: var(--bg);
  color: var(--text);
}

a{ color: inherit; text-decoration: none; }

.layout{ display:flex; }

/* PXnet main/content spacing auf Pixel3DLab Layout bringen */
.main{
  margin-left: 260px;
  padding: 120px 2rem 3rem;
  width: 100%;
}

.content{
  max-width: 1200px;
}

@media (max-width: 680px){
  .sidebar{ display:none !important; }
  .main{ margin-left:0; padding: 140px 1.2rem; }
}

/* ----------------------------------------------------------
   3) TOPBAR (PXnet .topbar)
---------------------------------------------------------- */
.topbar{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: 80px !important;

  background: var(--hud-blue) !important;
  animation: none !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  padding: 0 2rem !important;
  border-bottom: 4px solid #00000020 !important;
  box-shadow: var(--hud-shadow) !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;

  z-index: 1000 !important;
}

/* Dark Header nicht blau */
html.dark .topbar{
  background: #151b23 !important;
  border-bottom-color: #ffffff18 !important;
}

.topbar h1{
  margin:0 !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color:#fff !important;
  text-shadow: 0 2px 0 rgba(0,0,0,0.2) !important;
}

.topbar-left,
.topbar-right{
  display:flex;
  align-items:center;
  gap: 1rem;
}

/* Theme-Switch / Logout / Badge */
.theme-switcher a{
  background: var(--hud-yellow) !important;
  color:#000 !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--hud-shadow) !important;
  padding: 7px 14px !important;
  font-weight: 800 !important;
}

.user-badge,
.topbar a.btn.small{
  background: #fff !important;
  color:#000 !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--hud-shadow) !important;
  font-weight: 800 !important;
}

html.dark .user-badge,
html.dark .topbar a.btn.small{
  background: var(--hud-white) !important;
  color:#fff !important;
}

/* ----------------------------------------------------------
   4) SIDEBAR (PXnet)
---------------------------------------------------------- */
.sidebar{
  position: fixed !important;
  top: 80px !important;
  left: 0 !important;
  width: 240px !important;
  bottom: 0 !important;

  background: var(--hud-card) !important;
  box-shadow: var(--hud-shadow) !important;
  border-right: 3px solid var(--hud-border) !important;

  padding-top: 2rem !important;
  display:flex !important;
  flex-direction:column !important;
  gap: .6rem !important;
}

/* Links in PXnet Sidebar (beide Varianten abfangen) */
.sidebar .sidebar-nav .nav-item,
.sidebar nav a{
  background: var(--hud-white) !important;
  box-shadow: var(--hud-shadow) !important;
  border-radius: var(--radius) !important;
  margin: 0 .8rem !important;

  padding: 12px 18px !important;
  display:flex !important;
  align-items:center !important;
  gap:.8rem !important;

  font-weight: 800 !important;
  color:#000 !important;

  opacity: 1 !important;
  transition: .15s !important;
}

.sidebar .sidebar-nav .nav-item:hover,
.sidebar nav a:hover{
  transform: translateX(6px) !important;
  background: var(--hud-blue) !important;
}

.sidebar .sidebar-nav .nav-item.active,
.sidebar nav a.active{
  transform: translateX(6px) !important;
  background: var(--hud-blue) !important;
}

html.dark .sidebar .sidebar-nav .nav-item,
html.dark .sidebar nav a{
  color:#fff !important;
}

/* ----------------------------------------------------------
   5) CARDS / PANELS
---------------------------------------------------------- */
.card,
.auth-card,
.auftrags-card,
.widget-card{
  background: var(--hud-white) !important;
  border-radius: var(--radius) !important;
  border: 3px solid var(--hud-border) !important;
  box-shadow: var(--hud-shadow) !important;
  backdrop-filter: none !important;
}

.cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.2rem;
  margin-top: 1rem;
}

/* ----------------------------------------------------------
   6) BUTTONS (komplett HUD, kein Purple)
---------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  cursor:pointer;
  border:none;
  text-decoration:none;
}

.btn,
.btn.small,
.btn.primary,
.send-btn{
  border-radius: var(--radius) !important;
  box-shadow: var(--hud-shadow) !important;
  font-weight: 900 !important;
}

/* Primary = HUD Purple (Pixel3DLab) */
.btn.primary{
  background: var(--hud-purple) !important;
  color:#000 !important;
  padding: 12px 18px !important;
  width: auto !important;
}

/* Small = HUD Blue */
.btn.small{
  background: var(--hud-blue) !important;
  color:#000 !important;
  padding: 8px 14px !important;
}

/* Danger = HUD Yellow */
.btn.small.danger{
  background: var(--hud-yellow) !important;
  color:#000 !important;
}

/* ----------------------------------------------------------
   7) FORMS (Login + allgemein) – Purple raus
---------------------------------------------------------- */
.form{
  background: var(--hud-white) !important;
  border: 3px solid var(--hud-border) !important;
  box-shadow: var(--hud-shadow) !important;
  border-radius: var(--radius) !important;
}

.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 3px solid var(--hud-border);
  background: var(--hud-white);
  box-shadow: var(--hud-shadow);
  color:#000;
}

html.dark .form-group input,
html.dark .form-group select,
html.dark .form-group textarea{
  color:#fff;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;
  border-color: var(--hud-blue);
  box-shadow: 0 0 0 3px rgba(121,198,255,0.35);
}

/* ----------------------------------------------------------
   8) CHAT (WhatsApp Style in HUD Farben)
---------------------------------------------------------- */
.chat-wrapper{
  display:flex;
  flex-direction:column;
}

.chat-box{
  background: var(--hud-white) !important;
  border: 3px solid var(--hud-border) !important;
  box-shadow: var(--hud-shadow) !important;
  border-radius: var(--radius) !important;
}

/* Bubble mine = HUD Blue */
.chat-message.mine .bubble{
  background: var(--hud-blue) !important;
  color:#000 !important;
  border: 3px solid var(--hud-border) !important;
  box-shadow: var(--hud-shadow) !important;
}

/* Bubble theirs = HUD White */
.chat-message.theirs .bubble{
  background: var(--hud-white) !important;
  color: inherit !important;
  border: 3px solid var(--hud-border) !important;
  box-shadow: var(--hud-shadow) !important;
}

/* Input Bar */
.chat-input-bar{
  background: var(--hud-white) !important;
  border-top: 3px solid var(--hud-border) !important;
}

.chat-input{
  background: var(--hud-white) !important;
  border: 3px solid var(--hud-border) !important;
  border-radius: var(--radius) !important;
  color: inherit !important;
}

.chat-input:focus{
  border-color: var(--hud-blue) !important;
  box-shadow: 0 0 0 3px rgba(121,198,255,0.35) !important;
}

/* Send Button = HUD Green (oder Blue – such dir eins aus) */
.send-btn{
  background: var(--hud-green) !important;
  color:#000 !important;
  border-radius: var(--radius) !important;
}

/* Typing indicator HUD */
.typing-indicator{
  background: var(--hud-yellow) !important;
  color:#000 !important;
  border: 2px solid var(--hud-border) !important;
  box-shadow: var(--hud-shadow) !important;
  border-radius: var(--radius) !important;
}

/* ----------------------------------------------------------
   9) PMS Liste (Option B – zentral im CSS, ohne Inline)
---------------------------------------------------------- */
.pms-list{
  margin-top: .8rem;
  display:flex;
  flex-direction:column;
  gap:.8rem;
}

.pms-item{
  background: var(--hud-white);
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  display:flex;
  align-items:center;
  justify-content:space-between;
  border: 3px solid var(--hud-border);
  box-shadow: var(--hud-shadow);
  transition:.15s;
}

.pms-item:hover{
  transform: translateY(-2px);
  background: var(--hud-blue);
}

.pms-left{ display:flex; align-items:center; gap:.9rem; }

.avatar{
  width:44px; height:44px;
  border-radius:50%;
  background: var(--hud-purple);
  color:#000;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 2px solid var(--hud-border);
  box-shadow: var(--hud-shadow);
}

.pms-info{ display:flex; flex-direction:column; gap:2px; }
.pms-info .name{ font-weight:800; font-size:.95rem; }
.pms-info .preview{
  font-size:.82rem;
  opacity:.75;
  max-width: 200px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pms-right{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.pms-time{ font-size:.75rem; opacity:.6; }

.unread-badge{
  background: var(--hud-yellow);
  color:#000;
  font-size:.7rem;
  font-weight:900;
  padding:.15rem .55rem;
  border-radius:999px;
  border: 2px solid var(--hud-border);
  box-shadow: var(--hud-shadow);
}

.pms-item:hover .name,
.pms-item:hover .preview,
.pms-item:hover .pms-time{
  color:#000;
}

/* Mini Preview Breite */
.chat-wrapper.mini-chat .pms-info .preview{ max-width: 150px; }