/* Dashboard-Redesign (10.09.2026, überarbeitet) — kompaktes Banner, Schnellsuche, Ampelzeile,
   Schnellzugriffe, einheitliches Karten-Raster mit Drag&Drop, dezenter Anpassen-FAB.
   Nutzt .ccb-*-Klassen (controlling-dashboard.css) für Karten-Optik, ergänzt nur Layout-Spezifisches. */

.dash-welcome-banner-compact {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    padding: 14px 22px !important; min-height: unset !important;
}
.dash-welcome-banner-compact .dash-welcome-left { flex: 0 0 auto; }
.dash-welcome-banner-compact .dash-welcome-greeting { font-size: .85rem; }
.dash-welcome-banner-compact .dash-welcome-user { font-size: 1.15rem; }
.dash-welcome-banner-compact .dash-welcome-subtitle { display: none; }

.dash-quick-search-wrap {
    flex: 1 1 320px; position: relative; display: flex; align-items: center;
    /* 13.09.2026, Nutzer-Vorgabe: neutraler Grauton statt halbtransparentem Weiß — der Banner
       selbst folgt jetzt dem Theme (weiß hell / dunkel dunkel), ein weißer Schleier wäre auf dem
       jetzt hellen Banner im Hellmodus quasi unsichtbar gewesen. */
    background: rgba(127,127,127,.14); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; gap: 10px;
    max-width: 480px;
}
.dash-quick-search-wrap i { opacity: .85; }
.dash-quick-search-wrap input {
    flex: 1; background: transparent; border: none; outline: none; color: inherit;
    font-size: .88rem;
}
.dash-quick-search-wrap input::placeholder { color: inherit; opacity: .7; }
.dash-quick-search-results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15); max-height: 360px; overflow-y: auto; z-index: 50;
    color: var(--text-main);
}
.dash-quick-search-results .dqs-kategorie {
    padding: 6px 14px; font-size: .72rem; font-weight: 700; text-transform: uppercase;
    color: var(--text-muted); background: var(--background);
}
.dash-quick-search-results .dqs-item {
    padding: 8px 14px; font-size: .85rem; cursor: pointer; border-bottom: 1px solid var(--border);
}
.dash-quick-search-results .dqs-item:hover { background: var(--background); }
.dash-quick-search-results .dqs-empty { padding: 14px; font-size: .85rem; color: var(--text-muted); }

.dash-quick-access-row {
    display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0;
}
/* Ampel-Kacheln stehen jetzt als Liste INNERHALB einer Widget-Karte (system-ampel), nicht mehr
   als eigene Seitenzeile — deshalb vertikal statt in einer Reihe. */
.dash-ampel-liste { display: flex; flex-direction: column; gap: 8px; }
.dash-ampel-tile {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    border-radius: 8px; font-size: .84rem; font-weight: 600; border: 1px solid var(--border);
    background: var(--background); cursor: pointer;
}
.dash-ampel-tile .ccb-ampel { width: 9px; height: 9px; flex-shrink: 0; }
.dash-quick-access-tile {
    display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 8px;
    font-size: .84rem; font-weight: 600; border: 1px solid var(--border); background: var(--surface);
    cursor: pointer; color: var(--text-main); text-decoration: none;
}
.dash-quick-access-tile:hover { border-color: var(--primary); }

/* ── Dezenter, dauerhafter "Dashboard anpassen"-Button ─────────────────────────────────────── */
.dash-customize-fab {
    position: fixed; right: 22px; bottom: 22px; z-index: 40;
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--surface); color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.12); opacity: .55; transition: opacity .15s, transform .15s;
}
.dash-customize-fab:hover { opacity: 1; color: var(--primary); transform: scale(1.06); }

/* ── Einheitliches Karten-Raster — echter Seitenbaukasten: Zeilen mit je eigener Spaltenzahl ──── */
/* 12.09.2026, Nutzer-Vorgabe, dritter Anlauf (s. polaris_dashboard.md für die volle Geschichte):
   erst automatisches Masonry, dann eine einzelne Reihe fester Spalten — beides reichte nicht, der
   Nutzer wollte z.B. eine Zeile über die volle Breite, darunter eine mit 3 Spalten, darunter eine
   mit 2. `.dash-widgets-grid` ist ein vertikaler Stapel von `.dash-row`-Elementen, jede Zeile hat
   ihre EIGENE `.dash-row-columns`-Reihe (frei wählbare Spaltenanzahl 1–4).
   **🔴 Bugfix 12.09.2026 (Nutzer-Meldung, per Screenshot markiert):** der Kartenabstand INNERHALB
   einer Spalte (`gap:24px`) war fälschlich auf `.dash-column` gesetzt — dessen einziges direktes
   Kind ist aber `.dash-column-body` (der eigentliche Kartenstapel liegt eine Ebene tiefer), wodurch
   `gap` wirkungslos war und Karten in derselben Spalte direkt aneinanderklebten. Fix: `gap` auf
   `.dash-column-body` verschoben, wo es tatsächlich zwischen den Karten wirkt. Gleichzeitig
   Spaltenabstand (`.dash-row-columns`) von 32px auf 20px reduziert (Nutzer-Feedback: dort zu viel
   Platz) — Kartenabstand innerhalb einer Spalte bleibt bei 24px (jetzt aber tatsächlich wirksam). */
.dash-widgets-grid { display: flex; flex-direction: column; gap: 28px; margin-bottom: 60px; }
.dash-row { display: flex; flex-direction: column; }
.dash-row-columns { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
/* 19.09.2026, Nutzer-Vorgabe: von 360/320px auf 200/180px verschmälert, damit 6-8 kompakte
   KPI-Kacheln in einer Zeile nebeneinanderpassen (zusammen mit DWX_MAX_SPALTEN 4→8 in
   dashboard-widgets.js). Eine Zeile mit nur 1-2 Spalten (z.B. ein breites Chart) bleibt davon
   unberührt — flex-grow füllt die Zeile weiterhin komplett aus, die Mindestbreite greift nur,
   wenn viele Spalten um denselben Platz konkurrieren. */
.dash-column { flex: 1 1 200px; min-width: 180px; }
/* 13.09.2026: leere Spalten (angelegt, aber (noch) ohne Karte) sollen außerhalb eines aktiven
   Drags keinen Platz beanspruchen, damit befüllte Spalten den frei werdenden Raum nutzen können.
   14.09.2026, Nutzer-Meldung (Regression): ursprünglich zusätzlich `overflow:hidden` gesetzt —
   das korrelierte zeitlich exakt mit einem Fall, bei dem sich auf einem 4-Spalten/2-leer-Layout
   GAR KEIN Widget mehr per Drag&Drop verschieben ließ (kein JS-Fehler, also vermutlich ein
   Chromium-Rendering-Aussetzer beim Erzeugen des Drag-Vorschaubilds durch `overflow:hidden` auf
   einer Nachbarspalte im selben Flex-Container — ähnliche Eigenart wie beim ursprünglichen
   Geburtstage-Fund). `overflow:hidden` ist hier ohnehin unnötig: die leere Spalte hat außerhalb
   eines Drags gar keinen sichtbaren Inhalt (die Ablagezone ist per `display:none` ausgeblendet),
   es gibt also nichts zu clippen — `flex:0 0 0` + `min-width:0` allein kollabiert die Spalte schon
   vollständig auf Breite 0. Diese Version schließt die Lücke UND lässt Drag&Drop unangetastet.
   NIEMALS `overflow:hidden`/`overflow:clip` auf `.dash-column-empty` zurückbringen, ohne vorher
   explizit mit einer 4-Spalten/2-leer-Konfiguration und Drag-Test gegenzuprüfen. */
.dash-column-empty { flex: 0 0 0; min-width: 0; }
.dash-widgets-grid.dwx-dnd-active .dash-column-empty { flex: 1 1 200px; min-width: 160px; }
.dash-column-body { display: flex; flex-direction: column; gap: 24px; }

/* 13.09.2026, Nutzer-Meldung "Geburtstage lässt sich nicht per Drag&Drop verschieben": ohne
   user-select:none startet ein Klick-Zieh-Vorgang auf Text (z.B. die Namensliste bei Geburtstage)
   im Browser bevorzugt eine Textmarkierung statt den HTML5-Drag — bei textarmen Karten (Diagramme,
   KPI-Zahlen) fiel das kaum auf, bei textlastigen Listen praktisch immer. */
.dash-widget-card { position: relative; cursor: default; user-select: none; -webkit-user-drag: element; }
.dash-widget-card.dwx-dragging { opacity: .4; }
.dash-widget-card.dwx-drag-over { outline: 2px dashed var(--primary); outline-offset: 3px; }
/* Einfüge-Indikator (obere/untere Kartenhälfte beim Drop) — zeigt eindeutig, ob die gezogene Karte
   davor oder danach eingefügt wird, auch beim Wechsel in eine andere Spalte. */
.dash-widget-card.dwx-drop-before { box-shadow: inset 0 4px 0 0 var(--primary); }
.dash-widget-card.dwx-drop-after  { box-shadow: inset 0 -4px 0 0 var(--primary); }
.dwx-dropzone-end {
    /* Immer im DOM (auch für leere Spalten nötig, wo keine Karte als Ziehziel existiert), aber nur
       während eines aktiven Drags sichtbar — sonst würde jede Spalte dauerhaft eine leere,
       gestrichelte Box zeigen. */
    display: none; align-items: center; justify-content: center; gap: 8px; min-height: 60px;
    border: 2px dashed var(--border); border-radius: 10px; padding: 16px;
    color: var(--text-muted); font-size: .85rem;
}
.dash-widgets-grid.dwx-dnd-active .dwx-dropzone-end { display: flex; }
.dwx-dropzone-end.dwx-drag-over { border-color: var(--primary); color: var(--primary); background: rgba(37,99,235,.06); }
.dash-widget-card .dash-widget-controls {
    position: absolute; top: 12px; right: 14px; display: flex; gap: 2px; z-index: 2;
}
.dash-widget-card .dash-widget-controls button, .dash-widget-card .dwx-drag-handle {
    background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: .8rem;
    padding: 4px 6px; border-radius: 4px;
}
.dash-widget-card .dwx-drag-handle { cursor: grab; }
.dash-widget-card .dwx-drag-handle:active { cursor: grabbing; }
.dash-widget-card .dash-widget-controls button:hover { background: var(--background); color: var(--text-main); }
.dwx-loading { color: var(--text-muted); font-size: .85rem; padding: 8px 0; }

/* 16.09.2026, Nutzer-Vorgabe: Pflicht-Widgets (immer vorhanden, nur verschiebbar) zeigen statt des
   "Entfernen"-Kreuzes ein kleines Schloss-Symbol an derselben Stelle. */
.dash-widget-card .dwx-pflicht-marker {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: .78rem; padding: 4px 6px; opacity: .6; cursor: default;
}

/* System-Karten (News/Aktivität/Aufgaben/Geburtstage) haben keinen eigenen <h3>-Titel im Card-
   Wrapper — ihr renderInto() bringt bereits einen .dash-section-header mit — Platz für die
   Controls trotzdem freihalten. */
.dash-widget-card .dash-section-header { padding-right: 46px; }

.dash-news-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.dash-news-item:last-child { border-bottom: none; }
.dash-news-item.dash-news-pinned { background: rgba(245,158,11,.06); margin: 0 -8px; padding: 10px 8px; border-radius: 8px; }
.dash-news-pin { color: #f59e0b; margin-right: 6px; }
.dash-news-title { font-weight: 700; font-size: .9rem; color: var(--text-main); }
.dash-news-content { font-size: .83rem; color: var(--text-muted); white-space: pre-wrap; margin-top: 2px; }
.dash-news-date { font-size: .74rem; color: var(--text-muted); margin-top: 4px; }

.dash-aufgaben-liste, .dash-geburtstage-liste { list-style: none; margin: 0; padding: 0; }
.dash-aufgaben-liste li, .dash-geburtstage-liste li {
    padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .85rem;
    display: flex; justify-content: space-between; gap: 10px; align-items: center;
}
.dash-aufgaben-liste li:last-child, .dash-geburtstage-liste li:last-child { border-bottom: none; }
.dash-aufgaben-gruppe-titel {
    font-size: .78rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted);
    margin: 12px 0 4px; cursor: pointer;
}
.dash-aufgaben-gruppe-titel:first-child { margin-top: 0; }

/* 16.09.2026, Nutzer-Vorgabe: Fälligkeits-Badges des neuen "Offene Pflichtschulungen"-Widgets
   (aus einer statischen Dashboard-Leiste in ein normales System-Widget überführt) — als Klassen
   statt Inline-Hex, damit Dark Mode von Anfang an mitgedacht ist (nicht wie beim alten Inline-
   Style-Bug in der eLearning-Kursseite, s. style.css "eLearning Meine Schulungen: Dark-Mode-Fix"). */
.dwx-badge { padding: 2px 9px; border-radius: 20px; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.dwx-badge-muted  { background: #f1f5f9; color: var(--text-muted); }
.dwx-badge-danger { background: #fee2e2; color: #991b1b; }
.dwx-badge-warn   { background: #fef3c7; color: #92400e; }
.dwx-badge-info   { background: #eff6ff; color: #1e40af; }
:root[data-theme="dark"] .dwx-badge-muted  { background: var(--surface-hover); color: var(--text-muted); }
:root[data-theme="dark"] .dwx-badge-danger { background: rgba(220,38,38,.18); color: #fca5a5; }
:root[data-theme="dark"] .dwx-badge-warn   { background: rgba(245,158,11,.16); color: #fbbf24; }
:root[data-theme="dark"] .dwx-badge-info   { background: rgba(59,130,246,.16); color: #93c5fd; }

/* ── "Dashboard anpassen"-Panel ─────────────────────────────────────────────────────────────── */
.dwx-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1000;
    display: flex; align-items: center; justify-content: center;
}
.dwx-modal {
    background: var(--surface); border-radius: 12px; padding: 20px 24px;
    width: 480px; max-width: 92vw; max-height: 80vh; overflow-y: auto;
}
.dwx-modal.dwx-modal-wide { width: 620px; }
.dwx-modal h3 { margin: 0 0 14px; font-size: 1.05rem; }
.dwx-modal-tabs { display: flex; gap: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.dwx-modal-tab {
    background: none; border: none; padding: 8px 4px; margin-bottom: -1px; cursor: pointer;
    font-size: .88rem; color: var(--text-muted); border-bottom: 2px solid transparent;
}
.dwx-modal-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.dwx-kategorie-titel {
    font-size: .78rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted);
    margin: 16px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.dwx-kategorie-titel:first-child { margin-top: 0; }
.dwx-modal-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 4px; border-bottom: 1px solid var(--border); font-size: .87rem;
}
.dwx-modal-item:last-child { border-bottom: none; }
.dwx-modal-close { text-align: right; margin-top: 14px; }

/* Reiter "Layout" im "Dashboard anpassen"-Dialog (12.09.2026, Nutzer-Vorgabe) — Zeilen anlegen,
   Spaltenanzahl je Zeile ändern, Zeilen entfernen/verschieben. */
.dwx-layout-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 4px; border-bottom: 1px solid var(--border); font-size: .87rem;
}
.dwx-layout-row:last-child { border-bottom: none; }
.dwx-layout-row-label { font-weight: 600; color: var(--text-main); }
.dwx-layout-row-controls { display: flex; align-items: center; gap: 4px; }
.dwx-layout-spalten-label { color: var(--text-muted); font-size: .8rem; margin: 0 2px 0 10px; }
.dwx-layout-col-count { min-width: 18px; text-align: center; font-weight: 600; }
.dwx-layout-row-up, .dwx-layout-row-down, .dwx-layout-col-minus, .dwx-layout-col-plus, .dwx-layout-row-remove {
    background: none; border: 1px solid var(--border); border-radius: 5px; cursor: pointer;
    color: var(--text-muted); font-size: .8rem; width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
}
.dwx-layout-row-up:hover, .dwx-layout-row-down:hover, .dwx-layout-col-minus:hover, .dwx-layout-col-plus:hover {
    border-color: var(--primary); color: var(--primary);
}
.dwx-layout-row-remove:hover { border-color: #dc2626; color: #dc2626; }
.dwx-layout-row-up:disabled, .dwx-layout-row-down:disabled, .dwx-layout-col-minus:disabled,
.dwx-layout-col-plus:disabled, .dwx-layout-row-remove:disabled { opacity: .35; cursor: default; }
.dwx-layout-add-row {
    /* flex-wrap (19.09.2026): DWX_MAX_SPALTEN 4→8 verdoppelte die Buttons hier, ohne Umbruch liefen
       sie im Dialog rechts aus dem sichtbaren Bereich. */
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 4px 4px; color: var(--text-muted); font-size: .82rem;
}
.dwx-layout-add-row-btn {
    background: none; border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px;
    color: var(--text-muted); cursor: pointer; font-size: .78rem;
}
.dwx-layout-add-row-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(37,99,235,.04); }

/* ── KPI-Block (19.09.2026, Nutzer-Vorgabe) ──────────────────────────────────────────────────────
   Bündelt mehrere Einzel-KPIs als kompakte Kachelreihe in EINER Widget-Karte (Alternative zu vielen
   einzelnen Spalten, s. _dwxBlockMetrics() in dashboard-widgets.js). Eigenes, kleineres Kachelraster
   statt der großen .ccb-kpi-value-Optik einzelner KPI-Karten. */
.dwx-kpiblock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}
.dwx-kpiblock-tile {
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.dwx-kpiblock-label {
    font-size: .68rem; color: var(--text-muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: .01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dwx-kpiblock-value {
    font-size: 1.15rem; font-weight: 700; color: var(--text-main);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dwx-kpiblock-sub {
    font-size: .68rem; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}