/* ═══════════════════════════════════════════════════════════════
   hub-user.css – User-Schicht der Plattform-Stylesheets
   Genutzt von: login.php · dashboard.php · profile.php
                sowie allen admin/*.php (Admin-Seiten laden
                hub-user.css mit, u.a. wegen .user-bar im Header)

   DREI-DATEI-ARCHITEKTUR:
   Die Plattform-UI verteilt sich auf drei Stylesheets:
     hub-base.css   – Tokens + Reset + bereichsagnostische Komponenten.
                      Auf ALLEN Seiten geladen.
     hub-user.css   – Login-, Dashboard- und Profil-spezifische Stile
                      (diese Datei). Auf User- UND Admin-Seiten geladen.
     hub-admin.css  – ausschließlich Admin-Bereich.

   LADE-REIHENFOLGE (zwingend):
     1. hub-base.css
     2. hub-user.css
     3. hub-admin.css   (nur Admin-Seiten)
     4. der branding_css()-<style>-Block  (nach ALLEN <link>-Tags)

   ABHÄNGIGKEIT VON hub-base.css:
   Alle hier verwendeten Tokens (semantische Variablen, Radien,
   Schatten, Gradients) sowie der Branding-Override stammen aus
   hub-base.css. Diese Datei MUSS daher nach hub-base.css geladen
   werden. Die Density-Stufen (6.1) sind bewusst nach den
   Branding-Overrides platziert (in hub-base.css), damit Branding-
   Inline-CSS keine Density-Stufen zerstört – die Lade-Reihenfolge
   base → user sichert das.

   SEKTIONSÜBERSICHT (diese Datei):
   5.  PAGE-LOGIN
   6.  PAGE-HUB (Dashboard, Profil)
       6.1  Dashboard – Layout & Grid & Density
       6.2  Dashboard – Toolbar
       6.3  Dashboard – Service-Kacheln (Pin, Resize, Status, Inhalts-Stufen)
       6.4  Dashboard – Gruppen
       6.5  Dashboard – Ansichtsmodi
       6.6  Dashboard – „Zuletzt besucht"
       6.7  Dashboard – Nachrichten-System (User-Frontend)
       6.8  Dashboard – Einstellungen-Panel
       6.9  Profil (main.profile-main)
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   5. PAGE-LOGIN
   Vollbild-Flex-Layout. Login-Card zentriert. Responsive ≤480px.
   ═══════════════════════════════════════════════════════════════ */
body.page-login { min-height: 100vh; display: flex; flex-direction: column; }
body.page-login main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }

.login-card { background: var(--color-surface); border-radius: var(--radius-xl); padding: 2rem 2.5rem; box-shadow: 0 8px 32px var(--shadow-md); border: 1px solid var(--color-border); width: 100%; max-width: 400px; }
.login-card h1 { font-size: 1.4rem; color: var(--color-text-heading); margin-bottom: 0.3rem; }
.login-card p  { font-size: 0.9rem; color: var(--color-text-secondary); margin-bottom: 1.5rem; }
.login-error   { background: var(--color-err-bg); border-left: 4px solid var(--color-err); color: var(--color-err-text); border-radius: var(--radius-sm); padding: 0.7rem 1rem; font-size: 0.9rem; margin-bottom: 1rem; }

/* Lockout-UX: Banner mit Countdown-Timer und Fortschrittsbalken */
.login-lockout { background: var(--color-err-bg); border: 1px solid var(--color-err-border); border-radius: var(--radius-md); padding: 1rem 1.1rem; margin-bottom: 1.25rem; }
.lockout-text  { font-size: 0.9rem; color: var(--color-err-text); margin-bottom: 0.5rem; }
.lockout-timer { font-size: 0.9rem; color: var(--color-err-text); margin-bottom: 0.5rem; font-variant-numeric: tabular-nums; }
.lockout-bar-outer { height: 4px; background: var(--color-bg-subtle); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 0.5rem; }
/* Breite wird per JS gesetzt */
.lockout-bar-inner { height: 100%; width: 100%; background: var(--color-err-text); border-radius: var(--radius-pill); transition: width 0.5s linear; }
.lockout-hint  { font-size: 0.8rem; color: var(--color-text-hint); }
.login-actions { display: flex; gap: 0.75rem; align-items: center; margin-top: 1rem; }

@media (max-width: 480px) {
  .login-card { padding: 1.5rem 1.25rem; }
}


/* ═══════════════════════════════════════════════════════════════
   6. PAGE-HUB  (Dashboard, Profil)
   Flex-Vollbild-Layout. Responsive ab 900px und 600px.
   ═══════════════════════════════════════════════════════════════ */
body.page-hub,
body.page-dashboard { min-height: 100vh; display: flex; flex-direction: column; }

body.page-hub main,
body.page-dashboard main { flex: 1; max-width: var(--max-width); margin: 0 auto; padding: 2rem 1.5rem; width: 100%; }

.user-bar { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--color-text-secondary); flex-wrap: wrap; }
.user-bar strong { color: var(--color-text-heading); }

body.page-dashboard h1 { font-size: 1.5rem; color: var(--color-text-heading); margin-bottom: 0.3rem; }
.welcome { font-size: 0.95rem; color: var(--color-text-secondary); margin-bottom: 2rem; }

/* Links in Fließtext-Kontexten sichtbar machen */
.welcome a,
.svc-meta a,
.svc-hint a,
.profile-form p a,
.profile-form small a {
  color: var(--color-brand);
  text-decoration: underline;
}
.welcome a:hover,
.svc-meta a:hover,
.svc-hint a:hover,
.profile-form p a:hover,
.profile-form small a:hover {
  color: var(--color-brand-dark);
}

/* ── 6.1 Dashboard – Layout, Grid & Density ─────────────────────
   Service-Kacheln als auto-fill Grid, Basis-Klassen der Kacheln.
   Erweiterungen (Pin, Resize, Status, Inhalts-Stufen) stehen in 6.3.
   iFrame-Overlay-Klassen stehen in Sektion 4.7 (hub-base.css).

   Density (Kacheldichte) wird pro User je Geräteklasse gespeichert
   (siehe b-06-dashboard-personalisierung.md). dashboard.php setzt
   eine der drei Klassen density-l|m|s am <main>-Element; sie
   überschreibt --tile-size und damit Spalten-/Zeilengröße des Grids
   sowie Padding und Gap der einzelnen Kachel. 

   Density-Werte sind bewusst nach den Schicht-2c-Branding-Overrides
   platziert, damit Branding-Inline-CSS keine Density-Stufen zerstört.
   ─────────────────────────────────────────────────────────────── */

/* Density-Stufen: überschreiben --tile-size am <main>-Element.
   Werte gewählt nach Designentscheidung:
   L=190 → 1×1 = 190 px, 2×2 = 400 px (Cap)
   M=150 → 1×1 = 150 px, 2×2 = 320 px
   S=90  → 1×1 = 90 px (App-Icon-Vergleich), 2×2 = 200 px */
/* Density-Stufenwerte als benannte Token – einzige Quelle der Wahrheit.
   dashboard-settings.js liest sie per getComputedStyle aus (Option 2,
   responsive Herabstufung), statt 190/150/90 zu duplizieren. */
body.page-dashboard main {
  --tile-size-l: 190px;
  --tile-size-m: 150px;
  --tile-size-s: 90px;
}
body.page-dashboard main.density-l { --tile-size: var(--tile-size-l); }
body.page-dashboard main.density-m { --tile-size: var(--tile-size-m); }
body.page-dashboard main.density-s { --tile-size: var(--tile-size-s); }

/* Grid-Span pro Größen-Modifier. Die effektive Kachelgröße wird in
   dashboard.php (dash_effective_size()) als tile-size--MxN-Klasse gesetzt;
   der Span wird ausschließlich über diese Klasse gesteuert. Beim Live-Resize
   wechselt onResize() in dashboard-settings.js dieselbe Klasse, sodass der
   Span sofort greift. */
.service-tile.tile-size--2x1 { grid-column: span 2; }
.service-tile.tile-size--1x2 { grid-row: span 2; }
.service-tile.tile-size--2x2 { grid-column: span 2; grid-row: span 2; }

/* Kachel-Basis: Padding und innerer Gap skalieren proportional zur Density.
   L = 1.5rem / 0.6rem (heutiges Verhalten)
   M = 1rem   / 0.45rem
   S = 0.75rem/ 0.3rem */
.service-tile { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; transition: box-shadow 0.15s, transform 0.15s; }
body.page-dashboard main.density-m .service-tile { padding: 0.75rem; gap: 0.4rem; }
body.page-dashboard main.density-s .service-tile { padding: 0.4rem;  gap: 0.2rem; }
.service-tile:hover { box-shadow: 0 6px 20px var(--shadow-lg); transform: translateY(-2px); }
.tile-icon  { font-size: 2rem; line-height: 1; }
.tile-label { font-size: 1.05rem; font-weight: 700; color: var(--color-text-heading); }
.tile-desc  { font-size: 0.85rem; color: var(--color-text-secondary); }

/* Öffnen-Button bzw. sein <a>-Wrapper wird ans untere Ende der Kachel
   geschoben, unabhängig davon, ob eine Beschreibung vorhanden ist.
   Das ersetzt das frühere flex:1 auf .tile-desc, das nur griff,
   wenn das Element überhaupt im DOM stand. */
.service-tile > .btn-open,
.service-tile > a:has(> .btn-open) {
  margin-top: auto;
}
/* Wrapper-<a> bei type=link: als Block einbinden, damit margin-top:auto greift,
   und den internen Button-Margin neutralisieren */
.service-tile > a:has(> .btn-open) {
  display: block;
}
.service-tile > a > .btn-open {
  margin-top: 0;
}


/* ═══════════════════════════════════════════════════════════════
   6.2  DASHBOARD – TOOLBAR
   Leiste direkt unter dem Header: Suche, Tag-Filter, Sortierung,
   Ansichts-Toggle, Einstellungs-Button.
   ═══════════════════════════════════════════════════════════════ */

.dash-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Suchfeld-Wrapper */
.dash-search-wrap {
  flex: 1;
  min-width: 160px;
  max-width: 280px;
  position: relative;
}

.dash-search-input {
  width: 100%;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  background: var(--color-bg);
  color: var(--color-text-primary);
}
.dash-search-input:focus {
  outline: 2px solid var(--color-brand);
  border-color: var(--color-brand);
}

/* Tag-Filter */
.dash-tag-filter {
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  background: var(--color-bg);
  color: var(--color-text-primary);
  cursor: pointer;
  width: auto;
}
.dash-tag-filter:focus {
  outline: 2px solid var(--color-brand);
  border-color: var(--color-brand);
}
/* Ansichts-Toggle-Gruppe */
.dash-view-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.dash-view-btn {
  padding: 0.4rem 0.75rem;
  font-size: 0.88rem;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
}
.dash-view-btn + .dash-view-btn {
  border-left: 1px solid var(--color-border-strong);
}
.dash-view-btn:hover  { background: var(--color-brand-subtle); color: var(--color-brand); }
.dash-view-btn.active { background: var(--color-brand); color: var(--color-surface); }

/* Einstellungs-Button */
.dash-settings-btn {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
}
.dash-settings-btn:hover { background: var(--color-brand-subtle); color: var(--color-brand); }
/* Inline-SVG-Icons (siehe includes/icons.php) –
   skalieren mit der Schriftgröße der Umgebung. */
.hub-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
/* Density-Herabstufungs-Indikator (Option 2):
   Markiert den aktiven Grid-Button mit einem dezenten „!", wenn die
   effektiv angezeigte Dichte von der gewählten abweicht (Platz reicht
   nicht für zwei Spalten). Absolut positioniert – verändert die
   Button-Geometrie und damit die Toggle-Group-Breite nicht. JS setzt
   die Klasse, der Tooltip (title) wird ebenfalls per JS gepflegt. */
.dash-view-btn--downgraded {
  position: relative;
}
.dash-view-btn--downgraded::after {
  content: '!';
  position: absolute;
  top: 0.05rem;
  right: 0.18rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-warn);
  pointer-events: none;
}
/* Auf dem aktiven Button (brand-Hintergrund, weiße Schrift) muss das
   „!" gegen Blau lesbar bleiben – heller Warnton statt gesättigtem Gelb. */
.dash-view-btn--downgraded.active::after {
  color: var(--color-warn-bg);
}

/* ═══════════════════════════════════════════════════════════════
   6.3  DASHBOARD – SERVICE-KACHELN (PIN, RESIZE, STATUS, INHALT)
   Ergänzungen zu .service-tile aus 6.1:
   Status-Dot, Pin-Marker, Resize-Handle, Inhalts-Layout.

   Inhalts-Konzept:
   • Inhalts-Größen (Icon, Text, Marker, Button) sind PRO DICHTE
     einheitlich – innerhalb einer Dichte wirkt der Bildschirm ruhig
   • Größen-Modifier (1×1/2×1/1×2/2×2) regeln nur:
     - Sichtbarkeit von Beschreibung und Öffnen-Button
     - Maximale Zeilenzahl der Beschreibung (line-clamp)
     - Vertikale Zentrierung bei kompakten Varianten
   • Verknüpfungstyp wird IMMER als Inline-SVG-Icon unten links gezeigt
   • Vollständige Beschreibung erscheint als nativer Tooltip auf der Kachel
   ═══════════════════════════════════════════════════════════════ */

/* Kachel braucht position:relative als Anker für absolute Elemente */
.service-tile {
  position: relative;
  align-items: center;
  text-align: center;
}

/* Status-Indikator (oben rechts) */
.tile-status-dot {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.tile-status-ok      { background: var(--color-ok); }
.tile-status-warn    { background: var(--color-warn); }
.tile-status-err     { background: var(--color-err); }
.tile-status-unknown { background: var(--color-border-strong); }

/* Pin-Marker (oben links) */
.tile-pin {
  position: absolute;
  top: 0.55rem;
  left: 0.65rem;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--color-brand);
  opacity: 0.7;
}
.tile-pin--removable {
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.tile-pin--removable:hover { opacity: 1; }
.tile-pin--user {
  color: var(--color-warn);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.tile-pin--user:hover { opacity: 1; }
.tile-pin--toggle {
  color: var(--color-text-hint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.service-tile:hover .tile-pin--toggle { opacity: 0.35; }
.tile-pin--toggle:hover                { opacity: 0.75; }

/* Resize-Handle (unten rechts) */
.tile-resize-handle {
  position: absolute;
  bottom: 0.3rem;
  right: 0.3rem;
  width: 1rem;
  height: 1rem;
  cursor: se-resize;
  opacity: 0.3;
  transition: opacity 0.15s;
  background-image:
    linear-gradient(135deg,
      transparent 40%,
      var(--color-border-strong) 40%,
      var(--color-border-strong) 50%,
      transparent 50%,
      transparent 65%,
      var(--color-border-strong) 65%,
      var(--color-border-strong) 75%,
      transparent 75%
    );
  touch-action: none;
}
.service-tile:hover .tile-resize-handle { opacity: 0.65; }
.tile-resize-handle:hover               { opacity: 1 !important; }

/* Resize-Handle nur in Grid-Ansicht */
#dash-content.dash-view-list .tile-resize-handle,
#dash-content.dash-view-compact .tile-resize-handle {
  display: none;
}

/* Resize-Feedback */
.service-tile--resizing {
  opacity: 0.7;
  box-shadow: 0 8px 24px var(--shadow-md);
}

/* Admin-gesperrte Kachel */
.service-tile--locked {
  cursor: default;
}
.service-tile--locked .tile-resize-handle {
  display: none;
}

/* Typ-Icon (Inline-SVG, unten links) – immer sichtbar im Grid */
.tile-type-icon {
  position: absolute;
  bottom: 0.4rem;
  left: 0.5rem;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--color-text-hint);
  pointer-events: none;
}
.tile-type-icon i { font-size: inherit; }

/* ── Inhalts-Größen pro Dichte ──────────────────────────────────
   Diese Regeln gelten unabhängig vom Größen-Modifier – innerhalb
   einer Dichte sehen Icon, Label, Beschreibung und Button immer
   gleich aus. Padding und Gap kommen aus 6.1.
   ─────────────────────────────────────────────────────────────── */

/* L-Dichte: Standard-Darstellung (entspricht heutiger 1×1 L-Kachel) */
body.page-dashboard main.density-l .service-tile .tile-icon  { font-size: 2rem; line-height: 1; }
body.page-dashboard main.density-l .service-tile .tile-label { font-size: 1.05rem; font-weight: 700; color: var(--color-text-heading); }
body.page-dashboard main.density-l .service-tile .tile-desc  { font-size: 0.85rem; line-height: 1.4; color: var(--color-text-secondary); }
body.page-dashboard main.density-l .service-tile .btn-open   { font-size: 0.9rem; padding: 0.55rem 1.2rem; }

/* M-Dichte: kompakter */
body.page-dashboard main.density-m .service-tile .tile-icon  { font-size: 1.5rem; line-height: 1; }
body.page-dashboard main.density-m .service-tile .tile-label { font-size: 0.85rem; font-weight: 700; color: var(--color-text-heading); }
body.page-dashboard main.density-m .service-tile .tile-desc  { font-size: 0.75rem; line-height: 1.35; color: var(--color-text-secondary); }
body.page-dashboard main.density-m .service-tile .btn-open   { font-size: 0.78rem; padding: 0.35rem 0.9rem; }

/* S-Dichte: sehr kompakt */
body.page-dashboard main.density-s .service-tile .tile-icon  { font-size: 1.1rem; line-height: 1; }
body.page-dashboard main.density-s .service-tile .tile-label { font-size: 0.78rem; font-weight: 600; color: var(--color-text-heading); }
body.page-dashboard main.density-s .service-tile .tile-desc  { font-size: 0.7rem; line-height: 1.3; color: var(--color-text-secondary); }
body.page-dashboard main.density-s .service-tile .btn-open   { font-size: 0.72rem; padding: 0.3rem 0.8rem; }

/* Label: Ellipsis bei Überlauf */
.service-tile .tile-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Beschreibung: Basis-Eigenschaften für Line-Clamp */
.service-tile .tile-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* ── Modifier-Regeln (pro Größen-Modifier) ──────────────────────
   Steuern Sichtbarkeit von Beschreibung/Button, Zeilenzahl der
   Beschreibung und vertikale Ausrichtung.
   ─────────────────────────────────────────────────────────────── */

/* L-Dichte */
body.page-dashboard main.density-l .service-tile.tile-size--1x1 .tile-desc { -webkit-line-clamp: 1;  line-clamp: 1; }
body.page-dashboard main.density-l .service-tile.tile-size--2x1 .tile-desc { -webkit-line-clamp: 1;  line-clamp: 1; }
body.page-dashboard main.density-l .service-tile.tile-size--1x2 .tile-desc { -webkit-line-clamp: 11; line-clamp: 11; }
body.page-dashboard main.density-l .service-tile.tile-size--2x2 .tile-desc { -webkit-line-clamp: 11; line-clamp: 11; }

/* M-Dichte */
body.page-dashboard main.density-m .service-tile.tile-size--1x1 {
  justify-content: center;
}
body.page-dashboard main.density-m .service-tile.tile-size--1x1 .tile-desc { -webkit-line-clamp: 2;  line-clamp: 2; }
body.page-dashboard main.density-m .service-tile.tile-size--2x1 .tile-desc { -webkit-line-clamp: 2;  line-clamp: 2; }
body.page-dashboard main.density-m .service-tile.tile-size--1x2 .tile-desc { -webkit-line-clamp: 12; line-clamp: 12; }
body.page-dashboard main.density-m .service-tile.tile-size--2x2 .tile-desc { -webkit-line-clamp: 12; line-clamp: 12; }

/* M·1×1: kein Button */
body.page-dashboard main.density-m .service-tile.tile-size--1x1 .btn-open,
body.page-dashboard main.density-m .service-tile.tile-size--1x1 > a:has(> .btn-open) {
  display: none;
}
body.page-dashboard main.density-m .service-tile.tile-size--1x1 { cursor: pointer; }

/* S-Dichte */
body.page-dashboard main.density-s .service-tile.tile-size--1x1,
body.page-dashboard main.density-s .service-tile.tile-size--2x1,
body.page-dashboard main.density-s .service-tile.tile-size--1x2 {
  justify-content: center;
  cursor: pointer;
}

/* S·1×1: keine Beschreibung */
body.page-dashboard main.density-s .service-tile.tile-size--1x1 .tile-desc { display: none; }

/* S·2×1, S·1×2: mit Beschreibung */
body.page-dashboard main.density-s .service-tile.tile-size--2x1 .tile-desc { -webkit-line-clamp: 1; line-clamp: 1; }
body.page-dashboard main.density-s .service-tile.tile-size--1x2 .tile-desc { -webkit-line-clamp: 6; line-clamp: 6; }

/* S·2×2: voller Inhalt */
body.page-dashboard main.density-s .service-tile.tile-size--2x2 .tile-desc { -webkit-line-clamp: 6; line-clamp: 6; }

/* S·1×1, S·2×1, S·1×2: kein Button */
body.page-dashboard main.density-s .service-tile.tile-size--1x1 .btn-open,
body.page-dashboard main.density-s .service-tile.tile-size--1x1 > a:has(> .btn-open),
body.page-dashboard main.density-s .service-tile.tile-size--2x1 .btn-open,
body.page-dashboard main.density-s .service-tile.tile-size--2x1 > a:has(> .btn-open),
body.page-dashboard main.density-s .service-tile.tile-size--1x2 .btn-open,
body.page-dashboard main.density-s .service-tile.tile-size--1x2 > a:has(> .btn-open) {
  display: none;
}

/* Öffnen-Button bzw. <a>-Wrapper bei type=link:
   • margin-top: auto schiebt ihn ans untere Kachelende (Flex-Trick
     – funktioniert nur in Spalten-Flex, der hier vorliegt)
   • seitliches Margin (1.5rem / 1.25rem / 1rem) hält Abstand
     zum Typ-Icon (links unten) und Resize-Anfasser (rechts unten)
   • align-self: stretch macht den Button kachelbreit
   
   Hinweis: Diese Regel greift nur in der Grid-Ansicht.
   In Sektion 6.5 wird sie für Listen- und Kompakt-Ansicht
   explizit überschrieben (margin-left: auto; margin-right: 1.75rem). */
.service-tile > .btn-open,
.service-tile > a:has(> .btn-open) {
  margin: auto 1.5rem 0.25rem;
  width: auto;
  align-self: stretch;
}
body.page-dashboard main.density-m .service-tile > .btn-open,
body.page-dashboard main.density-m .service-tile > a:has(> .btn-open) {
  margin: auto 1.25rem 0.25rem;
}
body.page-dashboard main.density-s .service-tile > .btn-open,
body.page-dashboard main.density-s .service-tile > a:has(> .btn-open) {
  margin: auto 1rem 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════
   6.4  DASHBOARD – GRUPPEN
   Gruppen als Zeilen-Abschnitte über dem Kachel-Grid.
   Aufklappbar via .dash-group__toggle (JS setzt .open).
   ═══════════════════════════════════════════════════════════════ */

.dash-group {
  margin-bottom: 1.5rem;
}

.dash-group__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.75rem;
  cursor: pointer;
  user-select: none;
}

.dash-group__toggle {
  font-size: 0.65rem;
  color: var(--color-text-hint);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.dash-group.open .dash-group__toggle { transform: rotate(90deg); }

.dash-group__label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-heading);
  flex: 1;
}
/* Virtuelle (noch nicht materialisierte) Admin-Vorgabe-Gruppe:
   Label in Hinweistext-Farbe statt Überschrift-Farbe – signalisiert
   „provisorisch / vom Administrator vorgegeben". Sobald der User die
   Gruppe anfasst (materialisiert), liefert dashboard.php sie ohne das
   virtual-Flag, die Klasse entfällt und das Label wird wieder normal. */
.dash-group--virtual .dash-group__label {
  color: var(--color-text-hint);
}
/* Kachel-Grid einer Gruppe */
.dash-group__body {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--tile-size));
  grid-auto-rows: var(--tile-size);
  row-gap: var(--tile-min-gap);
  column-gap: var(--tile-min-gap);
  justify-content: space-between;
}

/* Eingeklappter Zustand */
.dash-group:not(.open) .dash-group__body { display: none; }

/* Services ohne Gruppe – gleiche Ebene wie Gruppen */
.dash-ungrouped {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--tile-size));
  grid-auto-rows: var(--tile-size);
  row-gap: var(--tile-min-gap);
  column-gap: var(--tile-min-gap);
  margin-bottom: 1.5rem;
  justify-content: space-between;
}


/* ═══════════════════════════════════════════════════════════════
   6.5  DASHBOARD – ANSICHTSMODI
   Liste (≡) und Kompakt (▦) als Alternativen zum Grid.
   ═══════════════════════════════════════════════════════════════ */

/* ── Listen- und Kompakt-Ansicht ─────────────────────────────────
   Beide Modi machen die Kachel zu einer Zeile. Die Inhalts-Stufen
   (tile-content--xs|s|m|l|xl) werden in diesen Modi neutralisiert –
   alle Services sehen gleich aus, unabhängig von Density/Modifier.

   Listen-Modus: Pin oben links, Icon + Label + Beschreibung im
   Inhalt, Status und Typ-Icon oben rechts, Öffnen-Button rechts
   in der Zeile. Button hat margin-right damit Status/Typ nicht
   am Button kleben.

   Kompakt-Modus: ein-zeilig, Icon + Label links, Pin + Status
   rechts. Kein Button, kein Typ-Icon. Ganze Zeile klickbar.
   ─────────────────────────────────────────────────────────────── */

/* Container: einspaltig statt Grid */
.dash-view-list .dash-group__body,
.dash-view-list .dash-ungrouped,
.dash-view-list.dash-ungrouped,
.dash-view-compact .dash-group__body,
.dash-view-compact .dash-ungrouped,
.dash-view-compact.dash-ungrouped {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  grid-template-columns: none;
  grid-auto-rows: auto;
}
.dash-view-compact .dash-group__body,
.dash-view-compact .dash-ungrouped,
.dash-view-compact.dash-ungrouped {
  gap: 0.2rem;
}

/* ── Liste ───────────────────────────────────────────────────── */

.dash-view-list .service-tile {
  /* Inhalts-Stufen-Layout (justify/align center bei XS/S) komplett überschreiben */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 0.75rem;
  padding: 0.7rem 1rem 0.7rem 1.75rem;   /* links extra Platz für Pin-Ecke */
  width: auto;
  height: auto;
  cursor: default;
}

/* In Listen-Ansicht: Density-Regeln aus 6.3 neutralisieren.
   • Button und <a>-Wrapper sind IMMER sichtbar (außer in Kompakt)
   • Vertikale Zentrierung der Kachel-Spalte aufheben
   • Cursor wieder default (Klick-Target ist der Button)
   • Line-Clamp der Beschreibung neutralisieren (in Liste ein-zeilig
     mit Ellipsis – das macht 6.5 weiter unten bereits)
   • Padding-Schutz für den Button aus 6.3 entfernen, damit die
     Listen-Spezifik margin-left:auto greift */
/* Button + <a>-Wrapper in Listen-Ansicht: immer sichtbar.
   Die Selektoren beziehen die Density-Klasse am <main> ein,
   damit die Spezifität strikt höher ist als die display:none-
   Regeln aus Sektion 6.3 (die ebenfalls über main.density-X laufen). */
body.page-dashboard main.density-l .dash-view-list .service-tile.tile-size--1x1 .btn-open,
body.page-dashboard main.density-l .dash-view-list .service-tile.tile-size--2x1 .btn-open,
body.page-dashboard main.density-l .dash-view-list .service-tile.tile-size--1x2 .btn-open,
body.page-dashboard main.density-l .dash-view-list .service-tile.tile-size--2x2 .btn-open,
body.page-dashboard main.density-m .dash-view-list .service-tile.tile-size--1x1 .btn-open,
body.page-dashboard main.density-m .dash-view-list .service-tile.tile-size--2x1 .btn-open,
body.page-dashboard main.density-m .dash-view-list .service-tile.tile-size--1x2 .btn-open,
body.page-dashboard main.density-m .dash-view-list .service-tile.tile-size--2x2 .btn-open,
body.page-dashboard main.density-s .dash-view-list .service-tile.tile-size--1x1 .btn-open,
body.page-dashboard main.density-s .dash-view-list .service-tile.tile-size--2x1 .btn-open,
body.page-dashboard main.density-s .dash-view-list .service-tile.tile-size--1x2 .btn-open,
body.page-dashboard main.density-s .dash-view-list .service-tile.tile-size--2x2 .btn-open,
body.page-dashboard main.density-l .dash-view-list .service-tile.tile-size--1x1 > a:has(> .btn-open),
body.page-dashboard main.density-l .dash-view-list .service-tile.tile-size--2x1 > a:has(> .btn-open),
body.page-dashboard main.density-l .dash-view-list .service-tile.tile-size--1x2 > a:has(> .btn-open),
body.page-dashboard main.density-l .dash-view-list .service-tile.tile-size--2x2 > a:has(> .btn-open),
body.page-dashboard main.density-m .dash-view-list .service-tile.tile-size--1x1 > a:has(> .btn-open),
body.page-dashboard main.density-m .dash-view-list .service-tile.tile-size--2x1 > a:has(> .btn-open),
body.page-dashboard main.density-m .dash-view-list .service-tile.tile-size--1x2 > a:has(> .btn-open),
body.page-dashboard main.density-m .dash-view-list .service-tile.tile-size--2x2 > a:has(> .btn-open),
body.page-dashboard main.density-s .dash-view-list .service-tile.tile-size--1x1 > a:has(> .btn-open),
body.page-dashboard main.density-s .dash-view-list .service-tile.tile-size--2x1 > a:has(> .btn-open),
body.page-dashboard main.density-s .dash-view-list .service-tile.tile-size--1x2 > a:has(> .btn-open),
body.page-dashboard main.density-s .dash-view-list .service-tile.tile-size--2x2 > a:has(> .btn-open) {
  display: inline-flex;
}

/* Layout-Reset für alle Modifier in Listen-Ansicht.
   Auch hier mit Density-Klasse für ausreichende Spezifität. */
body.page-dashboard main.density-l .dash-view-list .service-tile.tile-size--1x1,
body.page-dashboard main.density-l .dash-view-list .service-tile.tile-size--2x1,
body.page-dashboard main.density-l .dash-view-list .service-tile.tile-size--1x2,
body.page-dashboard main.density-l .dash-view-list .service-tile.tile-size--2x2,
body.page-dashboard main.density-m .dash-view-list .service-tile.tile-size--1x1,
body.page-dashboard main.density-m .dash-view-list .service-tile.tile-size--2x1,
body.page-dashboard main.density-m .dash-view-list .service-tile.tile-size--1x2,
body.page-dashboard main.density-m .dash-view-list .service-tile.tile-size--2x2,
body.page-dashboard main.density-s .dash-view-list .service-tile.tile-size--1x1,
body.page-dashboard main.density-s .dash-view-list .service-tile.tile-size--2x1,
body.page-dashboard main.density-s .dash-view-list .service-tile.tile-size--1x2,
body.page-dashboard main.density-s .dash-view-list .service-tile.tile-size--2x2 {
  justify-content: flex-start;
  cursor: default;
}

.dash-view-list .service-tile .tile-desc {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
}

/* Margin-Override für Button in Liste muss mit höherer Spezifität
   greifen als die 6.3-Density-Regeln. Die folgende Regel ergänzt
   die bestehende Listen-Ansicht-Regel um eine zusätzliche
   Density-Dimension, damit sie sicher gewinnt. */
.dash-view-list .service-tile > .btn-open,
.dash-view-list .service-tile > a:has(> .btn-open),
body.page-dashboard main.density-l .dash-view-list .service-tile > .btn-open,
body.page-dashboard main.density-l .dash-view-list .service-tile > a:has(> .btn-open),
body.page-dashboard main.density-m .dash-view-list .service-tile > .btn-open,
body.page-dashboard main.density-m .dash-view-list .service-tile > a:has(> .btn-open),
body.page-dashboard main.density-s .dash-view-list .service-tile > .btn-open,
body.page-dashboard main.density-s .dash-view-list .service-tile > a:has(> .btn-open) {
  margin: 0 1.75rem 0 auto;
  align-self: center;
  width: auto;
}

/* Grid-Spans ignorieren – Liste ist immer einspaltig */
.dash-view-list .service-tile.tile-size--2x1,
.dash-view-list .service-tile.tile-size--2x2 { grid-column: auto; }
.dash-view-list .service-tile.tile-size--1x2,
.dash-view-list .service-tile.tile-size--2x2 { grid-row: auto; }

/* Pin in der oberen linken Ecke */
.dash-view-list .service-tile .tile-pin {
  top: 0.4rem; left: 0.5rem;
  font-size: 0.75rem;
}

/* Status-Dot und Typ-Icon oben rechts – mit Abstand zum Button durch
   margin-right des Buttons (siehe unten). */
.dash-view-list .service-tile .tile-status-dot {
  top: 0.45rem; right: 0.55rem;
}
.dash-view-list .service-tile .tile-type-icon {
  position: absolute;
  top: 0.4rem; right: 1.5rem;
  bottom: auto; left: auto;
  font-size: 0.85rem;
}

/* Icon: dezent größer als heute, ohne Anspruch auf großes Format */
.dash-view-list .service-tile .tile-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
}

/* Wrapper um Label + Beschreibung – bekommt den Mittelraum */
.dash-view-list .service-tile .tile-label,
.dash-view-list .service-tile .tile-desc {
  flex: 0 1 auto;
}
.dash-view-list .service-tile .tile-label {
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.dash-view-list .service-tile .tile-desc {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* Listen-Ansicht: Größen für Icon, Label, Beschreibung und Button
   sind dichte-unabhängig. Density-Klasse im Selektor sorgt für
   höhere Spezifität als die 6.3-Regeln. */
body.page-dashboard main.density-l .dash-view-list .service-tile .tile-icon,
body.page-dashboard main.density-m .dash-view-list .service-tile .tile-icon,
body.page-dashboard main.density-s .dash-view-list .service-tile .tile-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}

body.page-dashboard main.density-l .dash-view-list .service-tile .tile-label,
body.page-dashboard main.density-m .dash-view-list .service-tile .tile-label,
body.page-dashboard main.density-s .dash-view-list .service-tile .tile-label {
  font-size: 0.95rem;
  font-weight: 600;
}

body.page-dashboard main.density-l .dash-view-list .service-tile .tile-desc,
body.page-dashboard main.density-m .dash-view-list .service-tile .tile-desc,
body.page-dashboard main.density-s .dash-view-list .service-tile .tile-desc {
  font-size: 0.82rem;
  line-height: 1.5;
  display: block;
}

/* Beschreibung in Liste IMMER anzeigen – auch wenn S·1×1 sie
   per display:none versteckt (6.3). Die folgende Regel muss
   Spezifität >= 0,0,5,2 haben. */
body.page-dashboard main.density-s .dash-view-list .service-tile.tile-size--1x1 .tile-desc,
body.page-dashboard main.density-s .dash-view-list .service-tile.tile-size--2x1 .tile-desc,
body.page-dashboard main.density-s .dash-view-list .service-tile.tile-size--1x2 .tile-desc,
body.page-dashboard main.density-s .dash-view-list .service-tile.tile-size--2x2 .tile-desc,
body.page-dashboard main.density-m .dash-view-list .service-tile.tile-size--1x1 .tile-desc,
body.page-dashboard main.density-m .dash-view-list .service-tile.tile-size--2x1 .tile-desc,
body.page-dashboard main.density-m .dash-view-list .service-tile.tile-size--1x2 .tile-desc,
body.page-dashboard main.density-m .dash-view-list .service-tile.tile-size--2x2 .tile-desc,
body.page-dashboard main.density-l .dash-view-list .service-tile.tile-size--1x1 .tile-desc,
body.page-dashboard main.density-l .dash-view-list .service-tile.tile-size--2x1 .tile-desc,
body.page-dashboard main.density-l .dash-view-list .service-tile.tile-size--1x2 .tile-desc,
body.page-dashboard main.density-l .dash-view-list .service-tile.tile-size--2x2 .tile-desc {
  display: block;
  font-size: 0.82rem;
  line-height: 1.5;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

body.page-dashboard main.density-l .dash-view-list .service-tile .btn-open,
body.page-dashboard main.density-m .dash-view-list .service-tile .btn-open,
body.page-dashboard main.density-s .dash-view-list .service-tile .btn-open {
  font-size: 0.85rem;
  padding: 0.35rem 1rem;
}

/* Padding und Gap der Kachel in Listen-Ansicht sind density-unabhängig.
   Ohne diese Regeln drückt das Density-Padding aus Sektion 6.1
   (L=1.5rem, M=0.75rem, S=0.4rem) die Listen-Zeilen zusammen
   – mit unterschiedlichen Zeilenhöhen je nach zuvor gewählter
   Grid-Dichte. */
body.page-dashboard main.density-l .dash-view-list .service-tile,
body.page-dashboard main.density-m .dash-view-list .service-tile,
body.page-dashboard main.density-s .dash-view-list .service-tile {
  padding: 0.7rem 1rem 0.7rem 1.75rem;
  gap: 0.75rem;
}

/* Öffnen-Button: rechts in der Zeile, fester margin-right damit
   Status/Typ-Icon (oben rechts) nicht am Button kleben */
.dash-view-list .service-tile > .btn-open,
.dash-view-list .service-tile > a:has(> .btn-open) {
  margin-top: 0;
  margin-left: auto;
  margin-right: 1.75rem;        /* 28px Abstand zur rechten Kachelkante */
  flex-shrink: 0;
  width: auto;
}
.dash-view-list .service-tile .btn-open {
  margin: 0;
  width: auto;
  padding: 0.35rem 1rem;
  font-size: 0.85rem;
}

/* Resize-Handle in Liste ausblenden */
.dash-view-list .service-tile .tile-resize-handle { display: none; }

/* ── Kompakt ─────────────────────────────────────────────────── */

.dash-view-compact .service-tile {
  /* Inhalts-Stufen-Layout komplett überschreiben */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  width: auto;
  height: auto;
  cursor: pointer;
  transition: background 0.1s;
}

/* Padding und Gap der Kompakt-Kachel sind density-unabhängig. */
body.page-dashboard main.density-l .dash-view-compact .service-tile,
body.page-dashboard main.density-m .dash-view-compact .service-tile,
body.page-dashboard main.density-s .dash-view-compact .service-tile {
  padding: 0.35rem 0.75rem;
  gap: 0.5rem;
}

/* Icon-Größe in Kompakt-Ansicht: density-unabhängig.
   Die Density-Klasse im Selektor erhöht die Spezifität strikt
   über die 6.3-Regeln. */
body.page-dashboard main.density-l .dash-view-compact .service-tile .tile-icon,
body.page-dashboard main.density-m .dash-view-compact .service-tile .tile-icon,
body.page-dashboard main.density-s .dash-view-compact .service-tile .tile-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Label-Größe in Kompakt-Ansicht: density-unabhängig. */
body.page-dashboard main.density-l .dash-view-compact .service-tile .tile-label,
body.page-dashboard main.density-m .dash-view-compact .service-tile .tile-label,
body.page-dashboard main.density-s .dash-view-compact .service-tile .tile-label {
  font-size: 0.9rem;
  font-weight: 500;
}

.dash-view-compact .service-tile:hover { background: var(--color-brand-subtle); }
.dash-view-compact .service-tile.tile-size--2x1,
.dash-view-compact .service-tile.tile-size--2x2 { grid-column: auto; }
.dash-view-compact .service-tile.tile-size--1x2,
.dash-view-compact .service-tile.tile-size--2x2 { grid-row: auto; }

.dash-view-compact .service-tile .tile-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
.dash-view-compact .service-tile .tile-label {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 500;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pin und Status statisch in der Reihe rechts */
.dash-view-compact .service-tile .tile-pin {
  position: static;
  flex-shrink: 0;
  font-size: 0.75rem;
  order: 98;
}
.dash-view-compact .service-tile .tile-status-dot {
  position: static;
  flex-shrink: 0;
  order: 99;
}

/* Beschreibung, Typ-Icon, Öffnen-Button und Resize-Handle
   im Kompakt-Modus alle ausblenden */
.dash-view-compact .service-tile .tile-desc,
.dash-view-compact .service-tile .tile-type-icon,
.dash-view-compact .service-tile > .btn-open,
.dash-view-compact .service-tile > a:has(> .btn-open),
.dash-view-compact .service-tile .tile-resize-handle {
  display: none;
}


/* ═══════════════════════════════════════════════════════════════
   6.6  DASHBOARD – „ZULETZT BESUCHT"
   Horizontale Leiste unter der Toolbar, max. 5 Einträge.
   ═══════════════════════════════════════════════════════════════ */

.dash-recent-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.4rem 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 0.82rem;
  color: var(--color-text-hint);
}

.dash-recent-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  background: var(--color-brand-subtle);
  color: var(--color-brand);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.dash-recent-item:hover { background: var(--color-brand-light); }


/* ═══════════════════════════════════════════════════════════════
   6.7  DASHBOARD – NACHRICHTEN-SYSTEM (USER-FRONTEND)
   Toolbar-Button, Slide-in Panel, Notification-Banner,
   Umfrage-Balkendiagramm, Compose-Modal, Empfänger-Chips.
   Admin-Verwaltungs-Klassen (msg-*) stehen in Sektion 7.10
   (hub-admin.css).
   ═══════════════════════════════════════════════════════════════ */

/* ── Toolbar-Button ─────────────────────────────────────────────
   Identisch zu .dash-settings-btn; mit relativem Positioning
   als Anker für das Ungelesen-Badge.
   ─────────────────────────────────────────────────────────────── */
.dash-msg-btn {
  position: relative;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
}
.dash-msg-btn:hover  { background: var(--color-brand-subtle); color: var(--color-brand); }
.dash-msg-btn.active { background: var(--color-brand-subtle); color: var(--color-brand); border-color: var(--color-brand-border); }

/* Ungelesen-Badge (roter Kreis mit Zahl) */
.dash-msg-badge {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  background: var(--color-err);
  color: var(--color-surface);
  border-radius: var(--radius-pill);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
  pointer-events: none;
}
.dash-msg-reply-badge {
  position: absolute;
  bottom: -0.3rem;
  right: -0.3rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  background: var(--color-brand);
  color: var(--color-surface);
  border-radius: var(--radius-pill);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
  pointer-events: none;
}
/* Antwort-Indikator in der Vorschau-Zeile */
.dash-msg-new-replies {
  color: var(--color-brand);
  font-weight: 600;
  font-size: .75rem;
  white-space: nowrap;
}

/* ── Slide-in Panel ─────────────────────────────────────────────
   Fixiertes Panel von rechts. Breite: 380px.
   Höhe: passt sich dem Inhalt an (max: Dashboard-Höhe = 100vh
   minus Header/Footer-Reserve).
   JS setzt .open zum Ein-/Ausblenden.
   ─────────────────────────────────────────────────────────────── */
.dash-msg-panel {
  position: fixed;
  top: 4rem;           /* ca. Header-Höhe */
  right: 0;
  width: 380px;
  max-width: 96vw;
  max-height: calc(100vh - 5rem);
  max-height: calc(100dvh - 5rem); /* dynamic viewport: bezieht ein-/ausgeblendete mobile URL-Leiste mit ein */
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: -4px 0 24px var(--shadow-md);
  transform: translateX(100%);
  transition: transform 0.22s ease;
  z-index: 150;
  overflow: hidden;
}
.dash-msg-panel.open { transform: translateX(0); }

/* Panel-Kopfzeile */
.dash-msg-panel__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  flex-shrink: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-heading);
}
.dash-msg-panel__close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--color-text-hint);
  line-height: 1;
  flex-shrink: 0;
}
.dash-msg-panel__close:hover { color: var(--color-text-primary); }

/* Scrollbarer Nachrichtenbereich */
.dash-msg-panel__list {
  flex: 1;
  min-height: 0; /* sichert Schrumpfen des flex:1-Kindes in allen Browsern */
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Leer-Zustand */
.dash-msg-panel__empty {
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--color-text-hint);
}


/* ── Nachrichteneinträge ─────────────────────────────────────────
   Kompakte Liste: Vorschau-Zeile + aufgeklappter Body.
   ─────────────────────────────────────────────────────────────── */
.dash-msg-item {
  position: relative;
  border-bottom: 1px solid var(--color-border);
}
.dash-msg-item:last-child { border-bottom: none; }

/* Ausgangsnachrichten (own_sent) – zurückhaltender als Eingangsnachrichten */
.dash-msg-item--own-sent {
  background: var(--color-bg-subtle);
  border-left: 3px solid var(--color-border-strong);
}
.dash-msg-item--own-sent .dash-msg-item__preview {
  color: var(--color-text-secondary);
}
.dash-msg-item--own-sent .dash-msg-item__row:hover {
  background: var(--color-border);
}

/* Ungelesen: blauer Balken links + fetter Betreff */
.dash-msg-item--unread::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--color-brand);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.dash-msg-item--unread .dash-msg-item__preview {
  font-weight: 700;
  color: var(--color-text-heading);
}

/* Klickbare Vorschau-Zeile */
.dash-msg-item__row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem 0.6rem 1.1rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
}
.dash-msg-item__row:hover { background: var(--color-brand-subtle); }

/* Pfeil-Icon (dreht sich beim Öffnen) */
.dash-msg-item__arrow {
  font-size: 0.6rem;
  color: var(--color-text-hint);
  flex-shrink: 0;
  transition: transform 0.15s;
}
.dash-msg-item.open .dash-msg-item__arrow { transform: rotate(90deg); }

/* Pin-Icon */
.dash-msg-item__pin {
  font-size: 0.7rem;
  flex-shrink: 0;
  opacity: 0.7;
}

/* Textbereich in der Vorschau-Zeile */
.dash-msg-item__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* 60-Zeichen-Vorschau */
.dash-msg-item__preview {
  font-size: 0.87rem;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Absender + Datum */
.dash-msg-item__meta {
  font-size: 0.75rem;
  color: var(--color-text-hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stern-Button */
.dash-msg-item__star {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--color-text-hint);
  line-height: 1;
  padding: 0.1rem;
  transition: color 0.15s;
}
.dash-msg-item__star:hover         { color: var(--color-warn-border); }
.dash-msg-item__star.starred       { color: var(--color-warn-border); }

/* Aufgeklappter Body */
.dash-msg-item__body {
  display: none;
  padding: 0.75rem 1rem 0.75rem 1.1rem;
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
  line-height: 1.65;
}
.dash-msg-item.open .dash-msg-item__body { display: block; }

/* Nachrichtentext */
.dash-msg-item__content {
  white-space: pre-wrap;
  margin-bottom: 0.75rem;
}

/* Löschen-Button im Body */
.dash-msg-item__del {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
  background: var(--color-err-bg);
  color: var(--color-err-mid);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-top: 0.5rem;
}
.dash-msg-item__del:hover { background: var(--color-err); color: var(--color-surface); }


/* ── Umfrage-Balkendiagramm ──────────────────────────────────────
   CSS-Balken mit %-Breite via Inline-Style (dokumentierte Ausnahme:
   Prozentwerte sind dynamische Zahlen, nicht über Klassen abbildbar).
   ─────────────────────────────────────────────────────────────── */
.dash-msg-poll-results {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.dash-msg-poll-bar {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.dash-msg-poll-bar__label {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}

.dash-msg-poll-bar__counts {
  font-size: 0.75rem;
  color: var(--color-text-hint);
  white-space: nowrap;
}

.dash-msg-poll-bar__track {
  height: 0.55rem;
  background: var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

/* Breite wird per Inline-Style gesetzt (dynamischer %-Wert) */
.dash-msg-poll-bar__fill {
  height: 100%;
  background: var(--color-brand);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}

/* Eigene Stimme: hervorgehoben */
.dash-msg-poll-bar--own .dash-msg-poll-bar__fill {
  background: var(--color-ok);
}
.dash-msg-poll-bar--own .dash-msg-poll-bar__label {
  font-weight: 700;
  color: var(--color-text-heading);
}

/* Abstimmen-Optionen (vor dem Abstimmen) */
.dash-msg-poll-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.dash-msg-poll-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.dash-msg-poll-option:hover          { background: var(--color-brand-subtle); border-color: var(--color-brand-border); }
.dash-msg-poll-option input          { width: auto; margin: 0; flex-shrink: 0; }

/* Antwort-Formular (Freitext) */
.dash-msg-reply-form {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dash-msg-reply-form textarea {
  min-height: 60px;
  font-size: 0.88rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  resize: vertical;
}

/* Eigene Antwort (readonly nach dem Senden) */
.dash-msg-own-reply {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-brand-subtle);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}
.dash-msg-own-reply__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: 0.2rem;
}


/* ── Notification-Banner (gepinnte Nachrichten) ──────────────────
   Dezenter Banner am oberen Rand des Dashboards.
   NUR sichtbar wenn ungelesene gepinnte Nachrichten vorhanden.
   JS setzt .open.
   ─────────────────────────────────────────────────────────────── */
.dash-msg-pin-banner {
  display: none;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  margin-bottom: 0.75rem;
  background: var(--color-brand-subtle);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.15s;
}
.dash-msg-pin-banner.open { display: flex; }
.dash-msg-pin-banner:hover { background: var(--color-brand-light); }

.dash-msg-pin-banner__icon { flex-shrink: 0; font-size: 0.85rem; }

.dash-msg-pin-banner__text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text-secondary);
}

.dash-msg-pin-banner__dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--color-text-hint);
  line-height: 1;
  padding: 0.1rem;
}
.dash-msg-pin-banner__dismiss:hover { color: var(--color-text-primary); }


/* ── Compose-Modal ───────────────────────────────────────────────
   Vollbild-Overlay mit zentrierter Box.
   ─────────────────────────────────────────────────────────────── */
.dash-msg-compose {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--shadow-overlay);
}
.dash-msg-compose.open { display: flex; }

.dash-msg-compose__box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  width: min(640px, 94vw);
  max-height: 88vh;
  max-height: 88dvh; /* dynamic viewport: schützt vor unten abgeschnittenem Modal auf Mobile */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px var(--shadow-md);
}

.dash-msg-compose__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text-heading);
  flex-shrink: 0;
}
.dash-msg-compose__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--color-text-hint);
  line-height: 1;
}
.dash-msg-compose__close:hover { color: var(--color-text-primary); }

.dash-msg-compose__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}

.dash-msg-compose__footer {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}


/* ── Empfänger-Chips ─────────────────────────────────────────────
   Suchfeld + Chip-Liste für die Empfänger-Auswahl im Compose-Modal.
   ─────────────────────────────────────────────────────────────── */
.dash-msg-recipient-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  min-height: 2.2rem;
  cursor: text;
}
.dash-msg-recipient-wrap:focus-within {
  outline: 2px solid var(--color-brand);
  border-color: var(--color-brand);
}

.dash-msg-recipient-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.55rem;
  background: var(--color-brand-light);
  color: var(--color-brand);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}
.dash-msg-recipient-chip--group {
  background: var(--color-ok-bg-subtle);
  color: var(--color-ok-text);
  border-color: var(--color-ok-border);
}

.dash-msg-recipient-chip__remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: inherit;
  line-height: 1;
  padding: 0;
  opacity: 0.7;
}
.dash-msg-recipient-chip__remove:hover { opacity: 1; }

.dash-msg-recipient-input {
  border: none;
  outline: none;
  font-size: 0.88rem;
  font-family: var(--font-base);
  background: transparent;
  color: var(--color-text-primary);
  min-width: 120px;
  flex: 1;
  padding: 0.1rem 0;
  width: auto;
}

/* Dropdown-Vorschlagsliste */
.dash-msg-recipient-dropdown {
  position: absolute;
  z-index: 210;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px var(--shadow-md);
  max-height: 200px;
  overflow-y: auto;
  min-width: 200px;
}
.dash-msg-recipient-dropdown__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.87rem;
  cursor: pointer;
  transition: background 0.1s;
}
.dash-msg-recipient-dropdown__item:hover { background: var(--color-brand-subtle); }
.dash-msg-recipient-dropdown__type {
  font-size: 0.7rem;
  color: var(--color-text-hint);
  margin-left: auto;
}
.dash-msg-recipient-dropdown__empty {
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  color: var(--color-text-hint);
}


/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .dash-msg-panel {
    width: 100vw; max-width: 100vw;
    border-radius: 0; border-right: none; border-left: none;
    top: 0;
    max-height: 100vh;
    max-height: 100dvh; /* moderne Browser: dynamischer Viewport */
  }
  .dash-msg-compose__box {
    width: 100vw; max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    border-left: none; border-right: none;
  }
  .iframe-box {
    width: 100vw; height: 100vh;
    height: 100dvh;
    border-radius: 0;
  }
}


/* ═══════════════════════════════════════════════════════════════
   6.8  DASHBOARD – EINSTELLUNGEN-PANEL
   Slide-in Panel analog zu dash-msg-panel für Dashboard-Konfiguration.
   ═══════════════════════════════════════════════════════════════ */

.dash-settings-panel {
  position: fixed;
  top: 4rem;
  right: 0;
  width: 420px;
  max-width: 96vw;
  max-height: calc(100vh - 5rem);
  max-height: calc(100dvh - 5rem); /* dynamic viewport: bezieht ein-/ausgeblendete mobile URL-Leiste mit ein */
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: -4px 0 24px var(--shadow-md);
  transform: translateX(100%);
  transition: transform 0.22s ease;
  z-index: 150;
  overflow: hidden;
}
.dash-settings-panel.open { transform: translateX(0); }

.dash-settings-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  flex-shrink: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-heading);
}

.dash-settings-panel__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--color-text-hint);
  line-height: 1;
  flex-shrink: 0;
}
.dash-settings-panel__close:hover { color: var(--color-text-primary); }

.dash-settings-panel__body {
  flex: 1;
  min-height: 0; /* sichert Schrumpfen des flex:1-Kindes in allen Browsern – ohne dies bleibt der Body so hoch wie sein Inhalt und der Container scrollt nicht */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
}

.dash-settings-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.dash-settings-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.dash-settings-section__title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-heading);
  margin-bottom: 0.75rem;
}

.dash-settings-hint {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.dash-settings-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.4rem 0;
  font-size: 0.88rem;
  color: var(--color-text-primary);
}
.dash-settings-checkbox input { margin: 0; }

/* User-Gruppen */
.dash-user-groups {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.dash-user-group {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem;
}

/* Drop-Zone für Drag & Drop */
.dash-user-group--drop-target {
  border-color: var(--color-brand);
  background: var(--color-brand-subtle);
}

.dash-user-group__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.dash-user-group__name {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.3rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-heading);
  transition: border-color 0.15s;
}
.dash-user-group__name:focus {
  outline: none;
  border-color: var(--color-brand);
  background: var(--color-surface);
}

.dash-user-group__delete {
  background: var(--color-err-bg);
  color: var(--color-err-mid);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.dash-user-group__delete:hover {
  background: var(--color-err);
  color: var(--color-surface);
}

.dash-user-group__services {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-height: 2.5rem;
  padding: 0.4rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  margin-bottom: 0.5rem;
}

.dash-user-group__service {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  background: var(--color-brand-light);
  color: var(--color-brand);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: grab;
}
.dash-user-group__service:active {
  cursor: grabbing;
}

.dash-user-group__service-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.7rem;
  color: inherit;
  line-height: 1;
  padding: 0;
  margin-left: 0.15rem;
  opacity: 0.7;
  flex-shrink: 0;
}
.dash-user-group__service-remove:hover { opacity: 1; }

.dash-user-group__hint {
  font-size: 0.75rem;
  color: var(--color-text-hint);
  font-style: italic;
  padding: 0.3rem 0.4rem;
  text-align: center;
}

.dash-user-group__empty {
  font-size: 0.8rem;
  color: var(--color-text-hint);
  font-style: italic;
  padding: 0.3rem 0;
  width: 100%;
  text-align: center;
}

.dash-user-group__drag-handle {
  cursor: grab;
  padding: 0.5rem;
  color: var(--color-text-secondary);
  font-size: 1.2rem;
  line-height: 1;
  user-select: none;
  margin-right: 0.5rem;
}

.dash-user-group__drag-handle:active {
  cursor: grabbing;
}

.dash-user-group--dragging {
  opacity: 0.5;
}

.dash-user-group--drag-over {
  border-top: 2px solid var(--color-brand);
}

/* Autocomplete-Suchfeld */
.dash-group-autocomplete {
  position: relative;
}

.dash-group-autocomplete__input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  background: var(--color-surface);
  color: var(--color-text-primary);
}
.dash-group-autocomplete__input:focus {
  outline: none;
  border-color: var(--color-brand);
}
.dash-group-autocomplete__input::placeholder {
  color: var(--color-text-hint);
}

.dash-group-autocomplete__dropdown {
  position: absolute;
  z-index: 220;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px var(--shadow-md);
  max-height: 280px;
  overflow-y: auto;
  display: none;
}
.dash-group-autocomplete__dropdown.open {
  display: block;
}

.dash-group-autocomplete__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background 0.1s;
}
.dash-group-autocomplete__item:hover,
.dash-group-autocomplete__item.selected {
  background: var(--color-brand-subtle);
}

.dash-group-autocomplete__icon {
  flex-shrink: 0;
  font-size: 1rem;
  width: 1.5rem;
  text-align: center;
}

.dash-group-autocomplete__label {
  flex: 1;
  font-size: 0.85rem;
  color: var(--color-text-primary);
}

.dash-group-autocomplete__empty {
  padding: 0.75rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--color-text-hint);
}

/* Palette-Toggle */
.dash-palette-toggle {
  margin-top: 1rem;
  padding: 0.4rem 0.6rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}
.dash-palette-toggle:hover {
  background: var(--color-brand-subtle);
}

.dash-palette-toggle__arrow {
  font-size: 0.6rem;
  transition: transform 0.15s;
}
.dash-palette-toggle.open .dash-palette-toggle__arrow {
  transform: rotate(90deg);
}

/* Verfügbare Services (Palette) */
.dash-available-services {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: none;
}
.dash-available-services.open {
  display: block;
}

.dash-available-services__title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
}

/* Suchfeld innerhalb der Palette: zusätzlicher unterer Abstand */
.dash-palette-search {
  margin: 0 0 0.75rem 0;
}

.dash-available-services__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-height: 2rem;
}

.dash-available-service {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  cursor: grab;
  transition: background 0.15s, transform 0.15s;
}
.dash-available-service:hover {
  background: var(--color-brand-subtle);
  border-color: var(--color-brand-border);
  transform: translateY(-1px);
}
.dash-available-service:active {
  cursor: grabbing;
}
.dash-available-service--dragging {
  opacity: 0.5;
}

.dash-available-service__icon {
  font-size: 0.85rem;
}

/* Reset-Sektion: aufklappbarer Toggle mit warnender Optik
   und kompaktem Container für die vier destruktiven Aktionen. */
.dash-reset-toggle {
  padding: 0.4rem 0.6rem;
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--color-warn-deep);
  font-weight: 500;
}
.dash-reset-toggle:hover {
  background: var(--color-warn-border);
}

.dash-reset-toggle__arrow {
  font-size: 0.6rem;
  transition: transform 0.15s;
}
.dash-reset-toggle.open .dash-reset-toggle__arrow {
  transform: rotate(90deg);
}

.dash-reset-actions {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: none;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
}
.dash-reset-actions.open {
  display: flex;
}

@media (max-width: 600px) {
  .dash-settings-panel {
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
    border-right: none;
    border-left: none;
    top: 0;
    max-height: 100vh;
    max-height: 100dvh; /* moderne Browser: dynamischer Viewport */
  }
}

/* ═══════════════════════════════════════════════════════════════
   6.9  PROFIL (main.profile-main)
   Scoped auf main.profile-main. Nutzt ausschließlich globale
   semantische Tokens – kein Admin-Scoping, vollständiges
   Branding-Override über body.page-hub.
   ═══════════════════════════════════════════════════════════════ */

/* Navigation */
main.profile-main .profile-nav {
  display: flex; gap: 0.5rem;
  flex-wrap: wrap; row-gap: 0.4rem;
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 0.75rem; margin-bottom: 1.75rem;
}
main.profile-main .profile-nav-link {
  padding: 0.4rem 1rem; border-radius: var(--radius-pill);
  font-size: 0.9rem; font-weight: 500; color: var(--color-text-secondary);
  text-decoration: none; border: 1px solid transparent; transition: all 0.15s;
}
main.profile-main .profile-nav-link:hover  { border-color: var(--color-border); background: var(--color-bg-subtle); }
main.profile-main .profile-nav-link.active { background: var(--color-brand-light); color: var(--color-brand); border-color: var(--color-brand-border); font-weight: 600; }

/* Formular-Container */
main.profile-main .profile-form {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 1.5rem; margin-top: 0;
}
main.profile-main .profile-form h2 { font-size: 1.1rem; margin-bottom: 1rem; color: var(--color-text-heading); }

/* Formular-Grid */
main.profile-main .profile-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
main.profile-main .profile-form-group { display: flex; flex-direction: column; gap: 0.25rem; }
main.profile-main .profile-form-group label { font-size: 0.85rem; font-weight: 600; color: var(--color-text-label); }
main.profile-main .profile-form-group input,
main.profile-main .profile-form-group textarea,
main.profile-main .profile-form-group select { padding: 0.5rem 0.6rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-size: 0.9rem; font-family: var(--font-base); }
main.profile-main .profile-form-group textarea { min-height: 80px; resize: vertical; }
main.profile-main .profile-form-group small { font-size: 0.75rem; color: var(--color-text-hint); }
main.profile-main .profile-form-group--full { grid-column: 1 / -1; }
main.profile-main .profile-form-section { font-size: 0.85rem; font-weight: 700; color: var(--color-brand); margin: 0.75rem 0 0.25rem; grid-column: 1 / -1; }

/* Tabelle */
main.profile-main .profile-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-top: 1rem; }
main.profile-main .profile-table th,
main.profile-main .profile-table td { border: 1px solid var(--color-border); padding: 0.55rem 0.75rem; text-align: left; vertical-align: middle; }
main.profile-main .profile-table th { background: var(--color-bg-subtle); font-weight: 600; }
main.profile-main .profile-table tr:hover td { background: var(--color-bg-subtle); }
main.profile-main .profile-table td.td-actions {
  vertical-align: middle;
  display: table-cell;
}
main.profile-main .profile-table .td-actions .kf-actions-view,
main.profile-main .profile-table .td-actions .kf-actions-edit {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: nowrap;
}
/* Gerätetabelle (Spaltenbreiten) */
main.profile-main .profile-table.kf-table { table-layout: fixed; }
main.profile-main .profile-table.kf-table col.col-name,
main.profile-main .profile-table.kf-table col.col-actions { width: 18rem; }
main.profile-main .profile-table.kf-table col.col-created,
main.profile-main .profile-table.kf-table col.col-expires,
main.profile-main .profile-table.kf-table col.col-lastused { width: auto; }

/* Geräte-Ansicht: Tabelle (Desktop) vs. Karten (Mobile)
   Beide Varianten hängen im DOM, CSS schaltet via Media-Query um.
   Sichtbarkeit wird im Mobile-Block (≤ 600px) gewechselt. */
main.profile-main .kf-view-cards { display: none; }

/* Einzelne Geräte-Karte (Mobile-Pendant einer Tabellenzeile) */
main.profile-main .kf-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 0.75rem;
}
main.profile-main .kf-card:last-child { margin-bottom: 0; }

/* Modifier: aktuelles Gerät – dezent hervorgehoben */
main.profile-main .kf-card--current {
  border-color: var(--color-brand-border);
  background: var(--color-brand-subtle);
}

/* Modifier: inaktives Gerät (gesperrt/abgelaufen) */
main.profile-main .kf-card--inactive {
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
  opacity: 0.85;
}

main.profile-main .kf-card__name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-heading);
  margin-bottom: 0.25rem;
}
main.profile-main .kf-card__name-input {
  display: none;
  width: 100%;
  font-size: 1rem;
  padding: 0.4rem 0.55rem;
}
main.profile-main .kf-card__name-sub {
  font-size: 0.78rem;
  color: var(--color-text-hint);
  margin-bottom: 0.5rem;
}
main.profile-main .kf-card__expires {
  font-size: 0.88rem;
  color: var(--color-text-primary);
  margin-bottom: 0.6rem;
}
main.profile-main .kf-card__expires strong {
  color: var(--color-text-heading);
}

/* Aufklappbare Details-Sektion (<details>-Element) */
main.profile-main .kf-card__details {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.75rem;
}
main.profile-main .kf-card__details summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0;
  font-weight: 500;
  color: var(--color-brand);
}
main.profile-main .kf-card__details summary::-webkit-details-marker { display: none; }
main.profile-main .kf-card__details summary::before {
  content: '▶';
  font-size: 0.65rem;
  transition: transform 0.15s;
}
main.profile-main .kf-card__details[open] summary::before {
  transform: rotate(90deg);
}
main.profile-main .kf-card__details-body {
  padding: 0.4rem 0 0 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
main.profile-main .kf-card__details-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.82rem;
}
main.profile-main .kf-card__details-row span:first-child {
  color: var(--color-text-secondary);
}
main.profile-main .kf-card__details-row span:last-child {
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

/* Status-Badge in inaktiver Karte */
main.profile-main .kf-card__status {
  margin-bottom: 0.5rem;
}

/* Aktions-Button-Reihe */
main.profile-main .kf-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
main.profile-main .kf-card__actions form {
  margin: 0;
}

/* Cleanup-Form: kompakte Inline-Anordnung auf Desktop;
   wird auf Mobile (≤ 600px) zu einer Karte umgestylt – siehe Mobile-Block. */
main.profile-main .kf-cleanup-card {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
main.profile-main .kf-cleanup-card select {
  width: auto;
}

@media (max-width: 900px) {
  main.profile-main .profile-form-row               { grid-template-columns: 1fr; }
  main.profile-main .profile-table.kf-table         { table-layout: auto; }
  main.profile-main .profile-table.kf-table col.col-name,
  main.profile-main .profile-table.kf-table col.col-actions { width: auto; }
}
@media (max-width: 600px) {
  /* Service-Grids: auto-fill mit aktueller --tile-size.
     Spaltenzahl ergibt sich automatisch aus der Container-Breite:
     bei L-Dichte (240 px) typisch 1 Spalte, bei M (180) 1–2 Spalten,
     bei S (140) 2 Spalten. */
  .dash-ungrouped,
  .dash-group__body {
    grid-template-columns: repeat(auto-fill, var(--tile-size));
    grid-auto-rows: var(--tile-size);
  }

  /* Auf Mobile: S-Dichte bekommt minimal mehr Innenabstand für Touch */
  body.page-dashboard main.density-s .service-tile {
    padding: 0.6rem;
  }
  
  /* Profil: Tabelle ausblenden, Karten einblenden */
  main.profile-main .kf-view-table { display: none; }
  main.profile-main .kf-view-cards { display: block; }

  /* Profil: schmaleres Padding im Formular-Container */
  main.profile-main .profile-form { padding: 1rem; }

  /* Profil: Cleanup-Form als Karte mit voller Breite */
  main.profile-main .kf-cleanup-card {
    flex-direction: column;
    align-items: stretch;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.75rem;
  }
  main.profile-main .kf-cleanup-card select {
    width: 100%;
  }

  /* Dashboard-Toolbar: zwei klar getrennte Zeilen.
     Zeile 1: Suchfeld (+ optional Tag-Filter)
     Zeile 2: Ansichts-Toggle, Einstellungen, Nachrichten
     Der Spacer wird zum erzwungenen Zeilenumbruch (flex-basis:100%,height:0). */
  .dash-toolbar .dash-search-wrap {
    flex: 1 1 50%;
    min-width: 140px;
    max-width: none;
  }
  .dash-toolbar .dash-tag-filter {
    flex: 0 1 auto;
    max-width: 140px;
  }
  .dash-toolbar .split-bar-spacer {
    flex-basis: 100%;
    height: 0;
  }

  /* Tap-Targets vergrößern für Touch-Bedienung */
  .dash-search-input,
  .dash-tag-filter,
  .dash-view-btn,
  .dash-settings-btn,
  .dash-msg-btn {
    padding: 0.55rem 0.85rem;
    font-size: 0.95rem;
  }
}