/**
 * Nobody Workz — Webmail/Admin-SPA Reskin (Modoboa Vue/Vuetify) — Runde 3.
 * Ziel: EIN Design-System wie Portal/Admin/Login ("aus einem Guss").
 * GOTCHA: SPA läuft in v-theme--light + nutzt Vuetify `bg-primary` (#008bc3)
 * direkt auf Drawer/Ordner → wir zielen THEME-AGNOSTISCH auf echte Klassen.
 * Konzept: dunkle Brand-Shell (Sidebar) + heller, sauberer Lesebereich (.v-main),
 * identischer Blau-Akzent, System-Buttons/Felder/Cards/Menüs/Spacing.
 * Tokens 1:1 aus tokens(.dark).css. Reversibel: Datei entfernen + index.html-Link raus.
 */

.v-application {
  /* — Dunkle Shell (= Portal-Header / bg-primary dark) — */
  --nw-shell: #111920;
  --nw-shell-2: #0c131b;
  --nw-shell-line: color-mix(in oklab, #8fd4ed 16%, transparent);
  --nw-accent-d: #45b4dc;        /* Blau (dark) */
  --nw-accent-d-hover: #6bc4e4;
  --nw-on-shell: #eef2f7;
  --nw-on-shell-2: #a7b4c5;
  --nw-on-shell-3: #8c9aac;
  /* — Heller Lesebereich (= Light-Theme des Systems) — */
  --nw-read-bg: #f2f7fb;         /* bg-primary light */
  --nw-card: #ffffff;            /* bg-elevated light */
  --nw-read-line: color-mix(in oklab, #004f6e 14%, transparent);  /* --border light */
  --nw-accent-l: #008bc2;        /* Blau (light) */
  --nw-accent-l-hover: #006892;
  --nw-ink: #0c1520;
  --nw-ink-2: #3d4d5c;
  --nw-ink-3: #5f6e7d;
  /* — System-Primitive — */
  --nw-r-sm: 0.25rem; --nw-r-md: 0.5rem; --nw-r-lg: 0.75rem; --nw-r-xl: 1rem;
  --nw-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --nw-font-display: "Syne", "Plus Jakarta Sans", system-ui, sans-serif;
  --nw-shadow-card: 0 1px 2px rgba(12,21,32,.05), 0 4px 12px rgba(12,21,32,.07);
  --nw-shadow-pop: 0 4px 8px rgba(12,21,32,.06), 0 12px 28px rgba(12,21,32,.12);
  font-family: var(--nw-font) !important;
}
.v-application .v-btn { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; }

/* ===================== SIDEBAR (Drawer) → dunkle Brand-Shell ===================== */
.v-navigation-drawer,
.v-navigation-drawer.bg-primary {
  background: var(--nw-shell) !important;
  color: var(--nw-on-shell) !important;
  border-right: 1px solid var(--nw-shell-line) !important;
}
.v-navigation-drawer .v-navigation-drawer__content { background: transparent !important; }

/* ---- Brand-Lockup — vereinheitlicht für BEIDE Drawer-Strukturen ----
 * Webmail:           .v-navigation-drawer__prepend > .d-flex.align-center
 * Kontakte/Kalender: .nw-drawer-brand-row  (eigene Klasse, KEIN __prepend) */
.v-navigation-drawer .v-navigation-drawer__prepend { background: transparent !important; }
.v-navigation-drawer .v-navigation-drawer__prepend > .d-flex.align-center,
.v-navigation-drawer .nw-drawer-brand-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 10px 0 18px !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid color-mix(in oklab, var(--nw-shell-line) 55%, transparent) !important;
  margin: 0 0 4px 0 !important;
}
.v-navigation-drawer .v-navigation-drawer__prepend .v-img.logo,
.v-navigation-drawer .nw-drawer-brand-row .v-img.logo {
  flex: 0 0 auto !important;
  width: 28px !important; min-width: 28px !important; max-width: 28px !important;
  height: 28px !important; margin: 0 !important; order: 0 !important; align-self: center !important;
}
.v-navigation-drawer .v-img.logo .v-img__img { object-fit: contain !important; }
/* altes ::after-Wordmark (nw-overrides) überall aus */
.v-navigation-drawer .v-img.logo::after { content: none !important; display: none !important; }
/* sauberer Wordmark als Flex-Item zwischen Logo und Chevron (beide Strukturen) */
.v-navigation-drawer .v-navigation-drawer__prepend > .d-flex.align-center::before,
.v-navigation-drawer .nw-drawer-brand-row::before {
  content: "Nobody Workz";
  order: 1; align-self: center;
  font-family: var(--nw-font-display);
  font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; line-height: 1;
  color: var(--nw-on-shell); white-space: nowrap;
}
/* Chevron-Toggle: rechts, vertikal zentriert, feste Größe */
.v-navigation-drawer .v-navigation-drawer__prepend > .d-flex.align-center > .v-btn--icon,
.v-navigation-drawer .nw-drawer-brand-row > .v-btn--icon {
  order: 2 !important; margin: 0 0 0 auto !important;
  width: 34px !important; height: 34px !important; align-self: center !important;
  color: var(--nw-on-shell-3) !important;
}
.v-navigation-drawer .v-navigation-drawer__prepend > .d-flex.align-center > .v-btn--icon:hover,
.v-navigation-drawer .nw-drawer-brand-row > .v-btn--icon:hover {
  color: var(--nw-on-shell) !important; background: rgba(255,255,255,.08) !important;
}

/* ===================== RAIL (eingeklappt, ~56px) — alles zentriert =====================
 * Messung: Rail-Breite 56px, Mitte = 28px. Items muessen 40px breit + exakt
 * mittig sein (8px je Seite) und duerfen NICHT ueber den Rand ragen. */

/* Container/Listen-Wrapper: keine seitlichen Abstaende, volle 56px, Kinder zentrieren.
 * WICHTIG: .resize-handle ausschliessen — der ist position:absolute und wuerde,
 * auf 56px aufgeblasen, den ganzen Rail ueberlagern und ALLE Klicks blockieren. */
.v-navigation-drawer--rail .v-navigation-drawer__content > div:not(.resize-handle),
.v-navigation-drawer--rail .v-navigation-drawer__content .mr-2,
.v-navigation-drawer--rail .v-list {
  margin: 0 !important; padding: 0 !important; width: 56px !important; max-width: 56px !important; min-width: 56px !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; box-sizing: border-box !important;
}
/* Resize-Handle im Rail komplett deaktivieren (kein Klick-Blocker, im Rail eh nicht nutzbar) */
.v-navigation-drawer--rail .resize-handle { display: none !important; pointer-events: none !important; }

/* Brand-Kopf: Logo oben, Chevron darunter, beide mittig */
.v-navigation-drawer--rail .v-navigation-drawer__prepend > .d-flex.align-center,
.v-navigation-drawer--rail .nw-drawer-brand-row {
  flex-direction: column !important;
  justify-content: center !important; align-items: center !important;
  gap: 6px !important; height: auto !important; min-height: 0 !important; padding: 10px 0 8px !important;
}
.v-navigation-drawer--rail .v-navigation-drawer__prepend > .d-flex.align-center::before,
.v-navigation-drawer--rail .nw-drawer-brand-row::before { display: none !important; }
.v-navigation-drawer--rail .v-img.logo { margin: 0 auto !important; }
.v-navigation-drawer--rail .v-navigation-drawer__prepend > .d-flex.align-center > .v-btn--icon,
.v-navigation-drawer--rail .nw-drawer-brand-row > .v-btn--icon { margin: 0 auto !important; }

/* Nav-Items: 40px-Quadrat exakt zentriert, nur Icon (Text aus) */
.v-navigation-drawer--rail .mailbox,
.v-navigation-drawer--rail .v-list-item {
  width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important;
  align-self: center !important; margin: 4px 0 !important; padding: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 0 !important; border-radius: 12px !important; box-shadow: none !important;
  box-sizing: border-box !important; overflow: hidden !important;
}
/* Text-Label im Rail ausblenden, nur das Icon zeigen + zentrieren */
.v-navigation-drawer--rail .mailbox > :not(.v-icon):not(i):not(svg),
.v-navigation-drawer--rail .v-list-item .v-list-item__content,
.v-navigation-drawer--rail .v-list-item__append { display: none !important; }
.v-navigation-drawer--rail .mailbox .v-icon,
.v-navigation-drawer--rail .mailbox i,
.v-navigation-drawer--rail .v-list-item .v-icon,
.v-navigation-drawer--rail .v-list-item__prepend { margin: 0 !important; }
.v-navigation-drawer--rail .v-list-item__prepend { width: auto !important; }

/* Aktiver Ordner im Rail: gefuellter Akzent (passt komplett rein), dunkles Icon */
.v-navigation-drawer--rail .mailbox.bg-primary-lighten-1,
.v-navigation-drawer--rail .v-list-item--active {
  background: var(--nw-accent-d) !important; box-shadow: none !important;
}
.v-navigation-drawer--rail .mailbox.bg-primary-lighten-1 .v-icon,
.v-navigation-drawer--rail .mailbox.bg-primary-lighten-1 i,
.v-navigation-drawer--rail .v-list-item--active .v-icon { color: #061016 !important; }

/* Komponieren-Button im Rail: 40px-Icon-Quadrat mittig */
.v-navigation-drawer--rail .v-btn.bg-secondary,
.v-navigation-drawer--rail .v-btn.bg-primary {
  width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important;
  padding: 0 !important; margin: 8px auto !important;
}
.v-navigation-drawer--rail .mailbox .v-badge__badge,
.v-navigation-drawer--rail .mailbox .badge { display: none !important; }

/* ---- „Komponieren" = Primär-Button (System) ---- */
.v-navigation-drawer .v-btn.bg-secondary,
.v-navigation-drawer .v-btn.bg-primary {
  background: var(--nw-accent-d) !important;
  color: #061016 !important;
  border-radius: var(--nw-r-md) !important;
  min-height: 2.75rem !important;
  box-shadow: 0 8px 20px -12px color-mix(in oklab, var(--nw-accent-d) 85%, transparent) !important;
}
.v-navigation-drawer .v-btn.bg-secondary:hover,
.v-navigation-drawer .v-btn.bg-primary:hover { background: var(--nw-accent-d-hover) !important; }

/* ---- Ordner-Items: dezent auf Shell, Akzent nur aktiv/hover ---- */
.v-navigation-drawer .mailbox,
.v-navigation-drawer .mailbox.bg-primary,
.v-navigation-drawer .mailbox.bg-primary-lighten-1 {
  background: transparent !important;
  color: var(--nw-on-shell-2) !important;
  border-radius: var(--nw-r-md) !important;
  margin: 2px 10px !important;
  padding: 0.5rem 0.7rem !important;
  transition: background-color .14s ease, color .14s ease !important;
}
.v-navigation-drawer .mailbox .v-icon, .v-navigation-drawer .mailbox i { color: inherit !important; }
.v-navigation-drawer .mailbox:hover {
  background: rgba(255,255,255,.06) !important; color: var(--nw-on-shell) !important;
}
.v-navigation-drawer .mailbox.bg-primary-lighten-1 {
  background: color-mix(in oklab, var(--nw-accent-d) 16%, transparent) !important;
  color: #ffffff !important;
  box-shadow: inset 2px 0 0 var(--nw-accent-d) !important;
  font-weight: 600 !important;
}
.v-navigation-drawer .mailbox .v-badge__badge,
.v-navigation-drawer .mailbox .badge {
  background: var(--nw-accent-d) !important; color: #061016 !important; font-weight: 700 !important;
}

/* ---- Admin-Nav (.v-list-item statt .mailbox) ---- */
.v-navigation-drawer .v-list-item {
  color: var(--nw-on-shell-2) !important; border-radius: var(--nw-r-md) !important; margin: 2px 10px !important;
}
.v-navigation-drawer .v-list-item .v-list-item__overlay { opacity: 0 !important; }
.v-navigation-drawer .v-list-item .v-icon, .v-navigation-drawer .v-list-item-title { color: inherit !important; }
.v-navigation-drawer .v-list-item:hover:not(.v-list-item--active) { background: rgba(255,255,255,.06) !important; color: var(--nw-on-shell) !important; }
.v-navigation-drawer .v-list-item--active {
  background: color-mix(in oklab, var(--nw-accent-d) 16%, transparent) !important;
  color: #fff !important; box-shadow: inset 2px 0 0 var(--nw-accent-d) !important; font-weight: 600 !important;
}

/* ---- Settings-Leiste / Quota unten ---- */
.v-navigation-drawer .bg-grey, .v-navigation-drawer .border-t-sm.bg-grey {
  background: var(--nw-shell-2) !important; border-color: var(--nw-shell-line) !important; color: var(--nw-on-shell-3) !important;
}
.v-navigation-drawer .v-btn--icon { color: var(--nw-on-shell-3) !important; }
.v-navigation-drawer .v-btn--icon:hover { color: var(--nw-on-shell) !important; }
.v-navigation-drawer .v-progress-linear__background { background: rgba(255,255,255,.12) !important; }
.v-navigation-drawer .v-progress-linear__determinate { background: var(--nw-accent-d) !important; }

/* ===================== LESEBEREICH (.v-main) → hell, System-Light ===================== */
.v-main { background: var(--nw-read-bg) !important; }

/* Seitentitel ("Webmail" etc.) */
.v-main .text-headline-medium, .v-main .text-h4, .v-main .text-h5, .v-main .text-h6 {
  color: var(--nw-ink) !important;
  font-family: var(--nw-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}

/* Avatar oben rechts (Initialen) im Akzent */
.v-main .v-avatar.bg-primary, .v-main .v-avatar, header .v-avatar {
  background: var(--nw-accent-l) !important; color: #fff !important; font-weight: 700 !important;
}

/* Such-/Aktionsleiste = saubere weiße Karte */
.v-main .v-toolbar, .v-main .v-toolbar.bg-white, .v-main .v-toolbar--flat {
  background: var(--nw-card) !important;
  color: var(--nw-ink) !important;
  border-bottom: 1px solid var(--nw-read-line) !important;
  box-shadow: none !important;
}
.v-main .v-toolbar .v-icon { color: var(--nw-ink-3) !important; }

/* Eingabefelder (Suche, Compose) = System-Light-Input */
.v-main .v-field {
  border-radius: var(--nw-r-md) !important;
  background: var(--nw-card) !important;
  --v-field-border-opacity: 1;
}
.v-main .v-field__outline { color: var(--nw-read-line) !important; }
.v-main .v-field--variant-solo, .v-main .v-field--variant-filled { box-shadow: none !important; border: 1px solid var(--nw-read-line) !important; }
.v-main .v-field input, .v-main .v-field textarea, .v-main .v-field .v-label { color: var(--nw-ink) !important; }
.v-main .v-field--focused { box-shadow: 0 0 0 3px color-mix(in oklab, var(--nw-accent-l) 30%, transparent) !important; border-color: var(--nw-accent-l) !important; }

/* Nachrichten-Liste: Karte, weiche Trenner, Hover-/Selected-Tint */
.v-main table, .v-main .v-table, .v-main .v-data-table {
  background: var(--nw-card) !important;
  color: var(--nw-ink) !important;
  border-radius: var(--nw-r-lg) !important;
  overflow: hidden;
  border: 1px solid var(--nw-read-line) !important;
  box-shadow: var(--nw-shadow-card) !important;
}
.v-main thead th { color: var(--nw-ink-2) !important; font-weight: 600 !important; border-bottom: 1px solid var(--nw-read-line) !important; }
.v-main tbody tr { border-bottom: 1px solid var(--nw-read-line) !important; transition: background-color .12s ease !important; }
.v-main tbody tr:last-child { border-bottom: 0 !important; }
.v-main tbody tr:hover { background: color-mix(in oklab, var(--nw-accent-l) 6%, white) !important; }
.v-main tbody tr.v-data-table__selected, .v-main tbody tr[aria-selected="true"] { background: color-mix(in oklab, var(--nw-accent-l) 10%, white) !important; }
.v-main tbody td { color: var(--nw-ink) !important; }
.v-main .text-medium-emphasis, .v-main .text-caption, .v-main .text-disabled { color: var(--nw-ink-3) !important; }

/* Karten im Lesebereich (Compose-Card, Einstellungen, Lesepane) */
.v-main .v-card {
  background: var(--nw-card) !important;
  color: var(--nw-ink) !important;
  border: 1px solid var(--nw-read-line) !important;
  border-radius: var(--nw-r-lg) !important;
  box-shadow: var(--nw-shadow-card) !important;
}
.v-main .v-card-title, .v-main .v-card-subtitle, .v-main .v-card-text { color: var(--nw-ink) !important; }
.v-main .v-card-subtitle { color: var(--nw-ink-3) !important; }

/* Tabs (z.B. in Einstellungen) */
.v-main .v-tab--selected, .v-main .v-tab.v-tab--selected { color: var(--nw-accent-l) !important; }
.v-main .v-tabs-slider, .v-main .v-tab__slider { background: var(--nw-accent-l) !important; }

/* Primär-Buttons im Lesebereich (Senden etc.) */
.v-main .v-btn.bg-primary, .v-main .v-btn--variant-flat.bg-primary, .v-main .v-btn--variant-elevated.bg-primary {
  background: var(--nw-accent-l) !important; color: #fff !important; border-radius: var(--nw-r-md) !important;
}
.v-main .v-btn.bg-primary:hover { background: var(--nw-accent-l-hover) !important; }
/* Aktions-Icons (Mülleimer/Flamme/Zahnrad) — neutral, nicht grell */
.v-main .v-btn--icon { border-radius: var(--nw-r-md) !important; }
.v-main .v-toolbar .v-btn--icon { color: var(--nw-ink-3) !important; }
.v-main .v-toolbar .v-btn--icon:hover { background: color-mix(in oklab, var(--nw-accent-l) 8%, transparent) !important; color: var(--nw-accent-l) !important; }
/* Vuetify-Farbklassen entgrellen (rot/amber) → neutral, Farbe erst beim Hover */
.v-main .v-toolbar .v-btn.text-error,
.v-main .v-toolbar .v-btn.text-warning { color: var(--nw-ink-3) !important; }
.v-main .v-toolbar .v-btn.text-error:hover { color: #dc2626 !important; background: color-mix(in oklab, #dc2626 8%, transparent) !important; }
.v-main .v-toolbar .v-btn.text-warning:hover { color: #d97706 !important; background: color-mix(in oklab, #d97706 8%, transparent) !important; }
.v-main .v-toolbar .v-btn--variant-tonal { background: color-mix(in oklab, var(--nw-accent-l) 10%, transparent) !important; color: var(--nw-accent-l) !important; }

/* ---- Compose-Toolbar (Senden/Optionen/Anhänge) — saubere System-Buttons ---- */
.v-main .v-toolbar { gap: 8px !important; padding-inline: 16px !important; }
.v-main .v-toolbar .v-btn { box-shadow: none !important; min-height: 2.5rem !important; border-radius: var(--nw-r-md) !important; }
/* „Senden" = Primär (blau) */
.v-main .v-toolbar .v-btn.bg-primary,
.v-main .v-toolbar .v-btn--variant-flat.bg-primary,
.v-main .v-toolbar .v-btn--variant-elevated.bg-primary {
  background: var(--nw-accent-l) !important; color: #fff !important;
}
.v-main .v-toolbar .v-btn.bg-primary:hover { background: var(--nw-accent-l-hover) !important; }
/* „Optionen/Anhänge" = sekundär (outline, neutral) */
.v-main .v-toolbar .v-btn.bg-secondary,
.v-main .v-toolbar .v-btn--variant-tonal:not(.bg-primary) {
  background: var(--nw-card) !important; color: var(--nw-ink-2) !important;
  border: 1px solid var(--nw-read-line) !important;
}
.v-main .v-toolbar .v-btn.bg-secondary:hover { background: color-mix(in oklab, var(--nw-accent-l) 6%, white) !important; }

/* Chips */
.v-main .v-chip.bg-primary, .v-main .v-chip--variant-tonal.text-primary {
  background: color-mix(in oklab, var(--nw-accent-l) 12%, transparent) !important; color: var(--nw-accent-l) !important;
}

/* Hinweise / Alerts (System-Status, subtil) */
.v-main .v-alert { border-radius: var(--nw-r-lg) !important; border: 1px solid var(--nw-read-line) !important; }
.v-main .v-alert.text-info, .v-main .v-alert.bg-info { background: color-mix(in oklab, var(--nw-accent-l) 10%, white) !important; color: var(--nw-ink) !important; border-color: color-mix(in oklab, var(--nw-accent-l) 30%, transparent) !important; }
.v-main .v-alert.text-success { background: #ecfdf5 !important; color: #065f46 !important; border-color: #86efac !important; }
.v-main .v-alert.text-warning { background: #fffbeb !important; color: #92400e !important; border-color: #fcd34d !important; }
.v-main .v-alert.text-error { background: #fef2f2 !important; color: #991b1b !important; border-color: #fca5a5 !important; }
.v-main .v-divider { border-color: var(--nw-read-line) !important; }

/* ===================== KALENDER (FullCalendar / Vuetify) ===================== */
.v-main .fc { --fc-border-color: var(--nw-read-line); --fc-today-bg-color: color-mix(in oklab, var(--nw-accent-l) 8%, white); font-family: var(--nw-font) !important; }
.v-main .fc .fc-toolbar-title { color: var(--nw-ink) !important; font-family: var(--nw-font-display) !important; font-weight: 700 !important; }
.v-main .fc .fc-button, .v-main .fc .fc-button-primary {
  background: var(--nw-card) !important; color: var(--nw-ink-2) !important;
  border: 1px solid var(--nw-read-line) !important; border-radius: var(--nw-r-md) !important;
  text-transform: none !important; box-shadow: none !important; font-weight: 600 !important;
}
.v-main .fc .fc-button-primary:not(:disabled).fc-button-active,
.v-main .fc .fc-button-primary:hover { background: var(--nw-accent-l) !important; color: #fff !important; border-color: var(--nw-accent-l) !important; }
.v-main .fc .fc-event, .v-main .fc .fc-event-main { background: var(--nw-accent-l) !important; border-color: var(--nw-accent-l-hover) !important; color: #fff !important; }
.v-main .fc .fc-col-header-cell-cushion, .v-main .fc .fc-daygrid-day-number { color: var(--nw-ink-2) !important; }
.v-main .fc .fc-day-today { background: color-mix(in oklab, var(--nw-accent-l) 8%, white) !important; }

/* ===================== POPUPS / MENÜS / DIALOGE (über Lesebereich → hell) ===================== */
.v-overlay__content .v-card, .v-menu > .v-overlay__content, .v-overlay__content .v-list {
  background: var(--nw-card) !important;
  color: var(--nw-ink) !important;
  border: 1px solid var(--nw-read-line) !important;
  border-radius: var(--nw-r-lg) !important;
  box-shadow: var(--nw-shadow-pop) !important;
}
.v-overlay__content .v-list-item-title, .v-overlay__content .v-list-item-subtitle,
.v-overlay__content .v-list-item__prepend .v-icon, .v-overlay__content .v-card-title { color: var(--nw-ink) !important; }
.v-overlay__content .v-list-item:hover > .v-list-item__overlay { opacity: 1 !important; background: color-mix(in oklab, var(--nw-accent-l) 10%, transparent) !important; }
.v-overlay__content .v-list-item:hover .v-list-item-title,
.v-overlay__content .v-list-item:hover .v-icon { color: var(--nw-accent-l) !important; }
.v-overlay__content .v-field { background: var(--nw-card) !important; border-radius: var(--nw-r-md) !important; }
.v-overlay__content .v-field input, .v-overlay__content .v-label { color: var(--nw-ink) !important; }
/* Dialog-Scrim wie System */
.v-overlay__scrim { background: rgba(8,20,32,.45) !important; backdrop-filter: blur(2px); }
/* Snackbar/Tooltip */
.v-snackbar__wrapper { background: var(--nw-shell) !important; color: var(--nw-on-shell) !important; border-radius: var(--nw-r-md) !important; }
.v-tooltip > .v-overlay__content { background: var(--nw-shell) !important; color: var(--nw-on-shell) !important; border-radius: var(--nw-r-sm) !important; }

/* ===================== Scrollbars ===================== */
.v-navigation-drawer ::-webkit-scrollbar, .v-main ::-webkit-scrollbar { width: 10px; height: 10px; }
.v-navigation-drawer ::-webkit-scrollbar-thumb { background: rgba(143,212,237,.22); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
.v-main ::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--nw-accent-l) 28%, transparent); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ===================== RAIL-OVERRIDES (ans Dateiende, .v-application-Prefix =
 * höhere Spezifität → gewinnt sicher gegen die Nicht-Rail-.mailbox-Regeln) ===================== */
.v-application .v-navigation-drawer--rail .resize-handle { display: none !important; pointer-events: none !important; }
.v-application .v-navigation-drawer--rail .v-navigation-drawer__content > div:not(.resize-handle),
.v-application .v-navigation-drawer--rail .v-navigation-drawer__content .mr-2,
.v-application .v-navigation-drawer--rail .v-list {
  width: 56px !important; min-width: 56px !important; max-width: 56px !important;
  margin: 0 !important; padding: 0 !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; box-sizing: border-box !important;
}
/* Ordner-Zeilen-Wrapper (div.pl-3.py-1): seitliches Padding raus, zentrieren */
.v-application .v-navigation-drawer--rail .v-navigation-drawer__content .pl-3,
.v-application .v-navigation-drawer--rail .v-navigation-drawer__content [class*="pl-"],
.v-application .v-navigation-drawer--rail .v-navigation-drawer__content [class*="px-"] {
  padding-left: 0 !important; padding-right: 0 !important;
  width: auto !important; display: flex !important; justify-content: center !important;
}
.v-application .v-navigation-drawer--rail .mailbox,
.v-application .v-navigation-drawer--rail .v-list-item {
  width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important;
  align-self: center !important; margin: 4px 0 !important; padding: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 12px !important; box-shadow: none !important; overflow: hidden !important;
}
.v-application .v-navigation-drawer--rail .mailbox > :not(.v-icon):not(i):not(svg),
.v-application .v-navigation-drawer--rail .v-list-item .v-list-item__content,
.v-application .v-navigation-drawer--rail .v-list-item__append { display: none !important; }
/* Aktiver Ordner im Rail: voller Akzent (passt rein), dunkles Icon */
.v-application .v-navigation-drawer--rail .mailbox.bg-primary-lighten-1,
.v-application .v-navigation-drawer--rail .v-list-item--active {
  background: var(--nw-accent-d) !important; box-shadow: none !important;
}
.v-application .v-navigation-drawer--rail .mailbox.bg-primary-lighten-1 .v-icon,
.v-application .v-navigation-drawer--rail .mailbox.bg-primary-lighten-1 i,
.v-application .v-navigation-drawer--rail .v-list-item--active .v-icon { color: #061016 !important; }
/* Komponieren im Rail: 40px-Icon-Quadrat mittig */
.v-application .v-navigation-drawer--rail .v-btn.bg-secondary,
.v-application .v-navigation-drawer--rail .v-btn.bg-primary {
  width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important;
  align-self: center !important; padding: 0 !important; margin: 8px auto !important;
}

/* ===================== MOBIL (Handy/Tablet) — greift nur < 600/960px =====================
 * Vuetify macht den Drawer auf Mobil automatisch zum Overlay; hier nur Politur,
 * damit Liste/Lesebereich/Compose randlos + komfortabel sind. Desktop unberührt. */
@media (max-width: 600px) {
  .v-main { background: var(--nw-card) !important; }
  /* Liste + Karten randlos (edge-to-edge wie Gmail/Outlook-App) */
  .v-main table, .v-main .v-table, .v-main .v-data-table,
  .v-main .v-card {
    border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; box-shadow: none !important;
  }
  /* Such-/Aktionsleiste umbrechen statt überlaufen */
  .v-main .v-toolbar { flex-wrap: wrap !important; height: auto !important; padding: 6px 8px !important; row-gap: 6px !important; }
  .v-main .v-toolbar .v-text-field, .v-main .v-toolbar .v-field { min-width: 0 !important; }
  /* Listen-Zeilen kompakter + Größenangabe ausblenden (kein Platz) */
  .v-main tbody td { padding-top: 8px !important; padding-bottom: 8px !important; }
  /* Compose-Felder volle Breite, Toolbar-Buttons umbrechen */
  .v-main .v-toolbar .v-btn { flex: 0 0 auto; }
  /* Lese-Inhalt (iframe) volle Breite ohne seitliche Sprünge */
  .v-main iframe { width: 100% !important; }
}
@media (max-width: 960px) {
  /* Auf Tablet/Handy ist der Drawer ein Overlay → Brand-Lockup bleibt voll
     (kein Rail erzwingen); Content nutzt volle Breite. */
  .v-main { padding-left: 0 !important; }
}


/* ============================================================================
 * Nobody Workz — Fixe 2026-05-30 (Design-Review Follow-up)
 * Angehängt an nw-webmail.css. Reversibel: diesen Block bis zum Sentinel
 * "NBW-FIX-2026-05-30-END" wieder entfernen.
 * NBW-FIX-2026-05-30-START  (Sentinel: nicht doppelt anhängen)
 * ==========================================================================*/

/* ---------------------------------------------------------------------------
 * FIX #1 (Wurzelursache) — Dropdowns/Menüs/Dialoge waren durchsichtig.
 * Grund: die --nw-*-Tokens lagen nur auf .v-application, Vuetify teleportiert
 * Overlays aber in .v-overlay-container DIREKT unter <body> (außerhalb von
 * .v-application). Dort waren alle var(--nw-*) undefiniert → background:
 * var(--nw-card) ungültig → transparent. Lösung: dieselben Tokens auf :root
 * spiegeln, damit die teleportierten Overlays sie erben.
 * Behebt: Apps-Menü, Profil-Menü, "Allen antworten/Weiterleiten"-Dropdown,
 * alle Select-Dropdowns UND alle Dialoge (z.B. "Neuen Filtersatz erstellen").
 * ------------------------------------------------------------------------- */
:root {
  --nw-shell: #111920;
  --nw-shell-2: #0c131b;
  --nw-shell-line: color-mix(in oklab, #8fd4ed 16%, transparent);
  --nw-accent-d: #45b4dc;
  --nw-accent-d-hover: #6bc4e4;
  --nw-on-shell: #eef2f7;
  --nw-on-shell-2: #a7b4c5;
  --nw-on-shell-3: #8c9aac;
  --nw-read-bg: #f2f7fb;
  --nw-card: #ffffff;
  --nw-read-line: color-mix(in oklab, #004f6e 14%, transparent);
  --nw-accent-l: #008bc2;
  --nw-accent-l-hover: #006892;
  --nw-ink: #0c1520;
  --nw-ink-2: #3d4d5c;
  --nw-ink-3: #5f6e7d;
  --nw-r-sm: 0.25rem; --nw-r-md: 0.5rem; --nw-r-lg: 0.75rem; --nw-r-xl: 1rem;
  --nw-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --nw-font-display: "Syne", "Plus Jakarta Sans", system-ui, sans-serif;
  --nw-shadow-card: 0 1px 2px rgba(12,21,32,.05), 0 4px 12px rgba(12,21,32,.07);
  --nw-shadow-pop: 0 4px 8px rgba(12,21,32,.06), 0 12px 28px rgba(12,21,32,.12);
}

/* Sicherheitsnetz: Overlay-Container + sein Inhalt bekommen die Werte auch
 * direkt (falls ein Browser :root-Vererbung in teleportierten Knoten anders
 * behandelt). Solide weiße Karte, dunkler Text, Schatten, Rahmen, Radius. */
.v-overlay-container .v-overlay__content > .v-card,
.v-overlay-container .v-overlay__content > .v-list,
.v-overlay-container .v-overlay__content > .v-sheet,
.v-overlay__content .v-card,
.v-overlay__content .v-list,
.v-menu > .v-overlay__content {
  background-color: #ffffff !important;
  color: var(--nw-ink, #0c1520) !important;
  border: 1px solid var(--nw-read-line, rgba(0,79,110,.14)) !important;
  border-radius: var(--nw-r-lg, .75rem) !important;
  box-shadow: var(--nw-shadow-pop, 0 12px 28px rgba(12,21,32,.12)) !important;
}
/* Innere Sheets/Tiles im Apps-Menü (2x2-Kacheln) sauber weiß + lesbar */
.v-overlay__content .v-card .v-sheet,
.v-overlay__content .v-col .v-sheet,
.v-overlay__content [class*="col-"] .v-sheet {
  background-color: #ffffff !important;
  color: var(--nw-ink, #0c1520) !important;
  border: 1px solid var(--nw-read-line, rgba(0,79,110,.14)) !important;
  border-radius: var(--nw-r-md, .5rem) !important;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.v-overlay__content .v-card .v-sheet .v-icon,
.v-overlay__content .v-col .v-sheet .v-icon,
.v-overlay__content [class*="col-"] .v-sheet .v-icon { color: var(--nw-accent-l, #008bc2) !important; }
.v-overlay__content .v-card .v-sheet:hover,
.v-overlay__content .v-col .v-sheet:hover,
.v-overlay__content [class*="col-"] .v-sheet:hover {
  background-color: var(--nw-accent-l, #008bc2) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,139,194,.32) !important;
}
.v-overlay__content .v-card .v-sheet:hover *,
.v-overlay__content .v-col .v-sheet:hover *,
.v-overlay__content [class*="col-"] .v-sheet:hover * { color: #ffffff !important; }
/* Menü-Texte & Icons konsequent lesbar */
.v-overlay__content .v-list-item-title,
.v-overlay__content .v-list-item-subtitle,
.v-overlay__content .v-card-title,
.v-overlay__content .v-card-text,
.v-overlay__content .v-list-item .v-icon { color: var(--nw-ink, #0c1520) !important; }
.v-overlay__content .v-list-item:hover .v-list-item-title,
.v-overlay__content .v-list-item:hover .v-icon { color: var(--nw-accent-l, #008bc2) !important; }

/* ---------------------------------------------------------------------------
 * FIX #2 — "Komponieren" klebte an der Trennlinie. Abstand nach oben (nur im
 * ausgeklappten Drawer; im Rail bleibt die bestehende zentrierte 8px-Regel).
 * ------------------------------------------------------------------------- */
.v-navigation-drawer:not(.v-navigation-drawer--rail) .v-btn.bg-secondary,
.v-navigation-drawer:not(.v-navigation-drawer--rail) .v-btn.bg-primary {
  margin-top: 16px !important;
  margin-bottom: 6px !important;
}

/* ---------------------------------------------------------------------------
 * FIX (Extra) — grüne System-Buttons (Material-Grün) auf Marken-Cyan ziehen.
 * Betrifft "Einstellungen aktualisieren" (bg-success) und den runden Floating-
 * Save (bg-green). Erfolgs-ALERTS bleiben grün (separat geregelt, hier nur Buttons).
 * ------------------------------------------------------------------------- */
.v-application .v-btn.bg-success,
.v-application .v-btn.bg-green,
.v-application .v-btn.bg-green-darken-1,
.v-application .v-btn.text-success.v-btn--variant-elevated {
  background-color: var(--nw-accent-l, #008bc2) !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px -12px rgba(0,139,194,.85) !important;
}
.v-application .v-btn.bg-success:hover,
.v-application .v-btn.bg-green:hover { background-color: var(--nw-accent-l-hover, #006892) !important; }

/* ---------------------------------------------------------------------------
 * FIX #5 — Mail-Ansicht: "Antworten"-Split-Button. Icon/Caret nicht abschneiden,
 * gleiche Höhe, sauberer Verlauf zwischen Haupt- und Caret-Teil.
 * ------------------------------------------------------------------------- */
.v-main .v-toolbar .v-btn .v-btn__content,
.v-main .v-toolbar .v-btn .v-btn__prepend,
.v-main .v-toolbar .v-btn .v-btn__append { overflow: visible !important; }
.v-main .v-toolbar .v-btn .v-icon {
  width: 18px !important; height: 18px !important; font-size: 18px !important;
  line-height: 1 !important; flex: 0 0 auto !important;
}
/* einheitliche Höhe aller Toolbar-Buttons in der Leseansicht */
.v-main .v-toolbar .v-btn { min-height: 2.5rem !important; align-self: center !important; }

/* ---------------------------------------------------------------------------
 * FIX #4 — Mobil (<= 960px): Drawer war ein 256px-Overlay, das die Mailliste
 * verdeckte (Vuetify hat ihn NICHT automatisch eingeklappt). Jetzt: Drawer
 * standardmäßig ausgeblendet, per Hamburger (siehe nw-ui.js) als Slide-in mit
 * Backdrop. Desktop (>=960px) bleibt unberührt.
 * ------------------------------------------------------------------------- */
@media (max-width: 960px) {
  /* Drawer raus aus dem Sichtfeld, bis geöffnet */
  .v-navigation-drawer.v-navigation-drawer--left:not(.nw-mobile-open) {
    transform: translateX(-100%) !important;
    box-shadow: none !important;
  }
  .v-navigation-drawer.v-navigation-drawer--left.nw-mobile-open {
    transform: translateX(0) !important;
    z-index: 2400 !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.4) !important;
    /* auf Mobil immer voll ausgeklappt, nie Rail */
    width: 264px !important; min-width: 264px !important; max-width: 264px !important;
  }
  /* Hauptbereich volle Breite (kein reservierter Drawer-Platz) */
  .v-main {
    padding-left: 0 !important;
    padding-inline-start: 0 !important;
    --v-layout-left: 0px !important;
  }
  /* Backdrop */
  .nw-mobile-backdrop {
    position: fixed; inset: 0; z-index: 2300;
    background: rgba(8,20,32,.5);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .nw-mobile-backdrop.is-open { opacity: 1; pointer-events: auto; }
  /* Hamburger (von nw-ui.js in die obere Leiste injiziert) */
  .nw-hamburger {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-right: 6px;
    border: 0; background: transparent; cursor: pointer;
    color: var(--nw-ink, #0c1520); border-radius: var(--nw-r-md, .5rem);
  }
  .nw-hamburger:hover { background: color-mix(in oklab, var(--nw-accent-l,#008bc2) 10%, transparent); }
  .nw-hamburger svg { width: 22px; height: 22px; }
  /* im ausgeklappten Mobil-Drawer Labels/Brand wieder zeigen (Rail-Reste aus) */
  .v-navigation-drawer.nw-mobile-open .v-list-item__content,
  .v-navigation-drawer.nw-mobile-open .v-navigation-drawer__prepend > .d-flex.align-center::before,
  .v-navigation-drawer.nw-mobile-open .nw-drawer-brand-row::before { display: block !important; }
}
/* Desktop: Hamburger & Backdrop nie anzeigen */
@media (min-width: 961px) {
  .nw-hamburger, .nw-mobile-backdrop { display: none !important; }
}
/* NBW-FIX-2026-05-30-END */


/* ============================================================================
 * Nobody Workz — Fix 2026-05-30b (final v2): Mobile-Pagination "1-6 an 6"
 * Lösung: Toolbar bricht auf Phone in 2 Zeilen — Zeile 1 = Suche + Aktions-
 * Icons, Zeile 2 = Pagination ("1-6 an 6" + Pfeile) rechtsbündig mit dünnem
 * Trenner. Da die Mailliste position:absolute mit FESTEM margin-top ist (misst
 * die Toolbarhöhe nicht), wird ihr margin-top auf Phone erhöht, damit sie
 * sauber unter der nun zweizeiligen Toolbar beginnt (keine Überlappung).
 * Anker .v-spacer + .d-flex trifft nur die Listen-Toolbar (Mail-Ansicht ok).
 * Reversibel bis Sentinel NBW-FIX-2026-05-30b-END.
 * NBW-FIX-2026-05-30b-START
 * ==========================================================================*/
@media (max-width: 600px) {
  .v-main .v-toolbar,
  .v-main .v-toolbar .v-toolbar__content {
    height: auto !important;
    min-height: 0 !important;
  }
  .v-main .v-toolbar .v-toolbar__content {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
    column-gap: 4px !important;
    padding-block: 8px !important;
    align-items: center !important;
  }
  .v-main .v-toolbar .v-toolbar__content > .nw-hamburger { align-self: center !important; }
  /* Suchfeld füllt Zeile 1 (sichtbar, basis > 0 → kollabiert nicht) */
  .v-main .v-toolbar .v-toolbar__content > .v-input:has(.v-field) {
    flex: 1 1 80px !important;
    min-width: 80px !important;
  }
  .v-main .v-toolbar .v-toolbar__content > .v-btn--icon {
    width: 38px !important; min-width: 38px !important;
  }
  /* Spacer aus; Pagination als eigene volle Zeile, rechtsbündig + Trenner */
  .v-main .v-toolbar .v-toolbar__content > .v-spacer { display: none !important; }
  .v-main .v-toolbar .v-toolbar__content > .v-spacer + .d-flex.align-center {
    order: 99 !important;
    flex: 1 0 100% !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid var(--nw-read-line, rgba(0,79,110,.14)) !important;
    white-space: nowrap !important;
  }
  .v-main .v-toolbar .v-toolbar__content > .v-spacer + .d-flex.align-center > div {
    display: inline-flex !important; flex-wrap: nowrap !important; align-items: center !important;
  }
  .v-main .v-toolbar .v-toolbar__content > .v-spacer + .d-flex.align-center .text-body-small {
    white-space: nowrap !important;
  }
  /* Mailliste (position:absolute, fixes margin-top) unter die 2-zeilige Toolbar
   * schieben — verhindert die Überlappung. Wert deckt 2 Zeilen ab. */
  .v-main .emails {
    margin-top: 224px !important;
  }
}
/* NBW-FIX-2026-05-30b-END */


/* ============================================================================
 * Nobody Workz — Fix 2026-05-30c (v3): Tablet-Menü + Mail-Ansicht
 * Wie v2, aber OHNE backdrop-filter (GPU-/White-Screen-Risiko) → solider,
 * leicht transluzenter Hintergrund auf .top-menu. Mobile-Drawer klassenbasiert.
 * Reversibel bis NBW-FIX-2026-05-30c-END.
 * NBW-FIX-2026-05-30c-START
 * ==========================================================================*/

/* ---- Hamburger: nur im Mobile-Modus ---- */
.nw-hamburger { display: none; }
html.nw-mobile-mode .nw-hamburger {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: 6px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--nw-ink, #0c1520); border-radius: var(--nw-r-md, .5rem);
}
html.nw-mobile-mode .nw-hamburger:hover {
  background: color-mix(in oklab, var(--nw-accent-l, #008bc2) 10%, transparent);
}
html.nw-mobile-mode .nw-hamburger svg { width: 22px; height: 22px; }

/* ---- Mobile-Drawer (Phone + Tablet, klassenbasiert) ---- */
.v-navigation-drawer--mobile:not(.nw-mobile-open) {
  transform: translateX(-105%) !important;
  visibility: hidden !important;
  box-shadow: none !important;
}
.v-navigation-drawer--mobile.nw-mobile-open {
  transform: translateX(0) !important;
  visibility: visible !important;
  width: 264px !important; min-width: 264px !important; max-width: 264px !important;
  z-index: 2400 !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.4) !important;
}
.v-navigation-drawer--mobile.nw-mobile-open .v-list-item {
  width: auto !important; max-width: none !important; min-width: 0 !important;
  justify-content: flex-start !important; margin: 2px 10px !important; padding: 0.5rem 0.7rem !important;
}
.v-navigation-drawer--mobile.nw-mobile-open .v-list-item__content { display: block !important; }
.v-navigation-drawer--mobile.nw-mobile-open .nw-drawer-brand-row::before,
.v-navigation-drawer--mobile.nw-mobile-open .v-navigation-drawer__prepend > .d-flex.align-center::before { display: block !important; }

/* ---- Backdrop ---- */
.nw-mobile-backdrop {
  position: fixed; inset: 0; z-index: 2300;
  background: rgba(8,20,32,.5);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
html.nw-mobile-mode .nw-mobile-backdrop { display: block !important; }
html.nw-mobile-mode .nw-mobile-backdrop.is-open { opacity: 1; pointer-events: auto; }
html:not(.nw-mobile-mode) .nw-mobile-backdrop { display: none !important; }

/* ---- Hauptbereich volle Breite im Mobile-Modus ---- */
html.nw-mobile-mode .v-main {
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
  --v-layout-left: 0px !important;
}

/* ---- Mail-Ansicht: email-frame NUR auf Phone einpassen (kein H-Scroll) ---- */
@media (max-width: 600px) {
  .v-main .email-frame {
    left: 10px !important;
    right: auto !important;
    width: calc(100% - 20px) !important;
    max-width: none !important;
  }
}

/* ---- top-menu (Apps + Avatar) opak (OHNE backdrop-filter) ---- */
.top-menu {
  background: var(--nw-read-bg, #f2f7fb) !important;
  border-radius: 12px;
  padding: 2px 4px;
  box-shadow: 0 2px 10px rgba(12,21,32,.08);
}
/* NBW-FIX-2026-05-30c-END */


/* ============================================================================
 * Nobody Workz — Fix 2026-05-31a (v2): Desktop-Rail auf ALLEN Seiten wie Webmail
 * Brand-Row (Account/Kontakte/Kalender = .d-flex.align-center.nw-drawer-brand-row)
 * blieb im Rail in ROW (Logo links, Chevron-Überlauf). Eine andere Regel
 * gewann mit hoher Spezifität → daher hier der volle 3-Klassen-Selektor (0,6,0),
 * der sicher gewinnt UND die Webmail-Rail (kein .nw-drawer-brand-row) nie trifft.
 * Subheader ("KATEGORIEN") im Rail aus. 1:1 gegen Webmail verifiziert.
 * NBW-FIX-2026-05-31a-START
 * ==========================================================================*/
.v-application .v-navigation-drawer--rail .v-navigation-drawer__content > .d-flex.align-center.nw-drawer-brand-row {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 0 8px !important;
  width: 56px !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}
.v-application .v-navigation-drawer--rail .v-navigation-drawer__content > .d-flex.align-center.nw-drawer-brand-row .v-img.logo {
  margin: 0 auto !important;
  left: auto !important;
}
.v-application .v-navigation-drawer--rail .v-navigation-drawer__content > .d-flex.align-center.nw-drawer-brand-row > .v-btn--icon,
.v-application .v-navigation-drawer--rail .v-navigation-drawer__content > .d-flex.align-center.nw-drawer-brand-row .v-btn--icon {
  position: static !important;
  transform: none !important;
  margin: 0 auto !important;
}
.v-application .v-navigation-drawer--rail .v-navigation-drawer__content > .d-flex.align-center.nw-drawer-brand-row::before {
  display: none !important;
}
/* Subheader (z.B. "KATEGORIEN") im eingeklappten Rail ausblenden (jede Seite) */
.v-application .v-navigation-drawer--rail .v-list-subheader { display: none !important; }
/* Nav-Items im Rail exakt zentriert */
.v-application .v-navigation-drawer--rail .v-list-item,
.v-application .v-navigation-drawer--rail .mailbox {
  margin-left: auto !important; margin-right: auto !important;
}
/* Rail: Icon exakt mittig (prepend voll-breit zentriert, spacer raus) */
.v-application .v-navigation-drawer--rail .v-list-item__prepend {
  width: 100% !important; margin: 0 !important; padding: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.v-application .v-navigation-drawer--rail .v-list-item__spacer { display: none !important; width: 0 !important; min-width: 0 !important; }
.v-application .v-navigation-drawer--rail .v-list-item { padding-left: 0 !important; padding-right: 0 !important; }
/* Rail: vertikaler Icon-Abstand der .v-list-item-Seiten an Webmail angleichen (Mitte-zu-Mitte 56px) */
.v-application .v-navigation-drawer--rail .v-list-item { margin-top: 8px !important; margin-bottom: 8px !important; }
/* NBW-FIX-2026-05-31a-END */

/* ============================================================================
 * Nobody Workz — Fix 2026-05-31b: Mail-Ansicht Mobile (Toolbar-Overlap + Breite)
 * NBW-FIX-2026-05-31b-START
 * ==========================================================================*/
@media (max-width: 600px) {
  /* Mail-Toolbar (mit Back-Pfeil) unter den fixierten Apps/Avatar-Chip schieben
     -> Trash/Spam/Settings nicht mehr verdeckt, 1 saubere Zeile */
  html.nw-mobile-mode .v-main .v-toolbar:has(.mdi-arrow-left) { margin-top: 22px !important; }
  html.nw-mobile-mode .v-main .v-toolbar:has(.mdi-arrow-left) .v-toolbar__content { flex-wrap: nowrap !important; }
  /* Lese-Karte: weniger Seitenpadding -> mehr Lesebreite (symmetrisch mit email-frame) */
  .v-main .bg-white.rounded-lg.pa-4:has(.email-frame) { padding-left: 10px !important; padding-right: 10px !important; }
}
/* NBW-FIX-2026-05-31b-END */

/* ============================================================================
 * Nobody Workz — Fix 2026-05-31c: Split-Button (Antworten/Senden) nicht clippen
 * Ursache: .v-btn-group ist 36px hoch mit overflow:hidden, die Buttons darin
 * 40px -> oben/unten 2px abgeschnitten + runde Ecken gekappt. Zudem Icons im
 * cyan Primär-Button waren grau (.v-toolbar .v-icon -> --nw-ink-3).
 * NBW-FIX-2026-05-31c-START
 * ==========================================================================*/
.v-main .v-toolbar .v-btn-group,
header .v-toolbar .v-btn-group {
  overflow: visible !important;
  height: 40px !important;
  align-items: center !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
/* Saubere Split-Pille: außen rund, innere Kante bündig */
.v-main .v-toolbar .v-btn-group > .v-btn:first-child,
header .v-toolbar .v-btn-group > .v-btn:first-child {
  border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
}
.v-main .v-toolbar .v-btn-group > .v-btn:last-child,
header .v-toolbar .v-btn-group > .v-btn:last-child {
  border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
  border-left: 1px solid rgba(255,255,255,.25) !important;
}
/* Icons im cyan Primär-/Split-Button weiß (nicht grau) */
.v-main .v-toolbar .v-btn.bg-primary .v-icon,
.v-main .v-toolbar .v-btn.bg-secondary .v-icon,
.v-main .v-toolbar .v-btn-group .v-icon,
header .v-toolbar .v-btn.bg-primary .v-icon,
header .v-toolbar .v-btn-group .v-icon { color: #fff !important; }
/* NBW-FIX-2026-05-31c-END */

/* ============================================================================
 * Nobody Workz — Fix 2026-05-31d: Tab-Leisten auf Mobile umbrechen statt kappen
 * Account-Tabs (Profil/2-Faktor/Weiterleiten/AutoAntwort) waren 597px breit →
 * bei 430px wurde "Weiterleiten" angeschnitten, "AutoAntwort" ganz abgeschnitten,
 * keine Scroll-Pfeile -> nicht erreichbar. Auf <=600px: Tabs umbrechen (2 Zeilen),
 * alle vollständig sichtbar & klickbar. Desktop/Tablet (1 Zeile) unberührt.
 * NBW-FIX-2026-05-31d-START
 * ==========================================================================*/
@media (max-width: 600px) {
  .v-main .v-tabs,
  .v-main .v-tabs.v-slide-group { height: auto !important; overflow: visible !important; }
  .v-main .v-tabs .v-slide-group__content {
    display: flex !important;
    flex-wrap: wrap !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    row-gap: 4px;
  }
  .v-main .v-tabs .v-tab { flex: 0 1 auto !important; }
}
/* NBW-FIX-2026-05-31d-END */

/* ============================================================================
 * Nobody Workz — Fix 2026-05-31e: Mail-/Compose-Toolbar Buttons auf Mobile
 * gleichmäßig beabstanden (gingen "ineinander": back->Antworten nur 4px,
 * Icon-Buttons hatten ungleiche Eigen-Margins). Einheitliche 8px, Margins 0,
 * etwas weniger Toolbar-Padding für Reserve. Eine Zeile, klar getrennt.
 * NBW-FIX-2026-05-31e-START
 * ==========================================================================*/
@media (max-width: 600px) {
  html.nw-mobile-mode .v-main .v-toolbar:has(.mdi-arrow-left) .v-toolbar__content {
    flex-wrap: nowrap !important;
    column-gap: 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  html.nw-mobile-mode .v-main .v-toolbar:has(.mdi-arrow-left) .v-toolbar__content > .v-btn,
  html.nw-mobile-mode .v-main .v-toolbar:has(.mdi-arrow-left) .v-toolbar__content > .v-btn-group,
  html.nw-mobile-mode .v-main .v-toolbar:has(.mdi-arrow-left) .v-toolbar__content > .nw-hamburger {
    margin-left: 0 !important; margin-right: 0 !important;
  }
}
/* NBW-FIX-2026-05-31e-END */


/* ============================================================================
 * Nobody Workz — Fix 2026-05-31f: Mail-Toolbar GARANTIERT eine Zeile (robust)
 * Ersetzt die fragile :has()-Regel (31e). nw-ui.js v4 setzt .nw-mailview-toolbar
 * auf die Mail-Ansicht-Toolbar → wir targeten diese Klasse OHNE :has(), damit es
 * in JEDEM Browser/WebView greift (kein Pfeil/Caret mehr unter dem Mülleimer).
 * Enge, gleichmäßige Abstände → passt bis ~360px Breite ohne Überlauf.
 * NBW-FIX-2026-05-31f-START
 * ==========================================================================*/
@media (max-width: 600px) {
  /* Toolbar-Inhalt zwingend EINE Zeile, gleichmäßige Abstände, kein Umbruch */
  .v-main .v-toolbar.nw-mailview-toolbar .v-toolbar__content,
  html.nw-mobile-mode .v-main .v-toolbar.nw-mailview-toolbar .v-toolbar__content {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    column-gap: 6px !important;
    row-gap: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    overflow: visible !important;
  }
  /* Alle direkten Buttons: kein Eigen-Margin, fix in der Zeile */
  .v-main .v-toolbar.nw-mailview-toolbar .v-toolbar__content > .v-btn,
  .v-main .v-toolbar.nw-mailview-toolbar .v-toolbar__content > .v-btn-group,
  .v-main .v-toolbar.nw-mailview-toolbar .v-toolbar__content > .nw-hamburger {
    margin: 0 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
  }
  /* Icon-Buttons kompakt (passt auch auf 360/375px-Phones), gleiche Höhe */
  .v-main .v-toolbar.nw-mailview-toolbar .v-toolbar__content > .v-btn.v-btn--icon {
    width: 36px !important;
    min-width: 36px !important;
    height: 40px !important;
  }
  /* Split-Button (Antworten ▾) bleibt zusammen, Caret NIE umbrechen */
  .v-main .v-toolbar.nw-mailview-toolbar .v-toolbar__content > .v-btn-group {
    flex-wrap: nowrap !important;
    overflow: visible !important;
    height: 40px !important;
  }
}
/* NBW-FIX-2026-05-31f-END */