/* ═══════════════════════════════════════════════════════════════════
   cloudstack — Post-Login Custom CSS (Rebrand Phase 2)
   Eingebunden via: occ config:app:set theming_customcss customcss
   Scope: body-user, body-settings, body-public (alles post-login)
   Getestet gegen: Nextcloud 33.0.2
   Brand-Tokens: amber #D4A574, cream #EDEAE3, ink #0F0F10, surface #1A1A1C
   ═══════════════════════════════════════════════════════════════════ */

/* ── 01 · vue-css-vars global  ────────────────────────────────────────
   nc-vue schreibt --color-primary* auf body — wir überschreiben beide
   (body-login hat der guest-theme-teil, hier alle post-login-bodies).
   WICHTIG: shadow-dom-vue-components (z.b. NcButton) erben diese vars
   nicht immer zuverlässig → section 12 bringt zusätzlich direkte overrides. */

body#body-user,
body.body-user,
body#body-settings,
body#body-public {
  --color-primary: #6B4523 !important;
  --color-primary-default: #6B4523 !important;
  --color-primary-text: #EDEAE3 !important;
  --color-primary-text-dark: #EDEAE3 !important;
  --color-primary-hover: #8B5E3C !important;
  --color-primary-light: rgba(212, 165, 116, 0.12) !important;
  --color-primary-light-text: #7A4F2A !important;
  --color-primary-light-hover: rgba(212, 165, 116, 0.22) !important;
  --color-primary-element: #6B4523 !important;
  --color-primary-element-default: #6B4523 !important;
  --color-primary-element-text: #EDEAE3 !important;
  --color-primary-element-hover: #8B5E3C !important;
  --color-primary-element-light: rgba(107, 69, 35, 0.12) !important;
  --color-primary-element-light-text: #7A4F2A !important;
  --color-primary-element-light-hover: rgba(107, 69, 35, 0.22) !important;

  --color-main-background: #0F0F10 !important;
  --color-main-background-rgb: 15, 15, 16 !important;
  --color-main-background-translucent: rgba(15, 15, 16, 0.85) !important;
  --color-main-background-blur: rgba(15, 15, 16, 0.70) !important;
  --color-main-text: #EDEAE3 !important;

  --color-background-hover: #1A1A1C !important;
  --color-background-dark: #141415 !important;
  --color-background-darker: #0F0F10 !important;
  --color-background-darkest: #0A0A0B !important;

  --color-border: #26262A !important;
  --color-border-dark: #1A1A1C !important;
  --color-border-maxcontrast: #3A3A40 !important;

  --color-text-maxcontrast: #EDEAE3 !important;
  --color-text-light: #EDEAE3 !important;
  --color-text-lighter: #8A8680 !important;

  --color-placeholder-light: #3A3A40 !important;
  --color-placeholder-dark: #26262A !important;

  --color-success: #7FB069 !important;
  --color-warning: #E0A96D !important;
  --color-error: #C97064 !important;
  --color-info: #6B8E7F !important;

  --color-loading-light: #8A8680 !important;
  --color-loading-dark: #EDEAE3 !important;

  --color-box-shadow: rgba(0, 0, 0, 0.5) !important;

  --color-checkbox-checked-background: #D4A574 !important;
  --color-checkbox-border: #3A3A40 !important;

  /* fonts (wiederholen für vue-components, die eigene font-stacks setzen) */
  --font-face: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}

/* ── 02 · typografie + scale  ────────────────────────────────────────
   10%-shrink nur auf #app-content — topbar und sidebar bleiben
   unberührt (nc-constants wie --header-height 50px greifen sonst
   inkonsistent und brechen layout). */

#app-content,
#app-content-vue {
  font-size: 15.3px !important;
  --default-clickable-area: 40px !important;
  --default-line-height: 22px !important;
}

#app-content h1, #app-content h2, #app-content h3, #app-content h4,
#app-content-vue h1, #app-content-vue h2, #app-content-vue h3, #app-content-vue h4 {
  font-family: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 640 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}

#app-content code, #app-content pre, #app-content kbd,
#app-content-vue code, #app-content-vue pre, #app-content-vue kbd {
  font-family: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, Menlo, monospace !important;
}

/* ── 03 · filigraner (radien, borders, hairlines)  ────────────────── */

body#body-user,
body#body-settings,
body#body-public {
  --border-radius: 8px !important;
  --border-radius-large: 12px !important;
  --border-radius-rounded: 24px !important;
  --border-radius-pill: 100px !important;
  --border-width-input: 1px !important;
  --border-width-input-focused: 2px !important;
}

#app-content hr, #app-content-vue hr {
  border: none !important;
  border-top: 1px solid #26262A !important;
  opacity: 0.8;
}

/* ── 04 · topbar + logo  ───────────────────────────────────────────── */

#header {
  background: #0F0F10 !important;
  border-bottom: 1px solid #26262A !important;
  color: #EDEAE3 !important;
}

#header .header-appname,
#header .header-appname-container,
#header h1 {
  color: #EDEAE3 !important;
  font-family: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* Logo als mask damit currentColor (=cream) durchschlägt */
#header .logo,
#header .header-logo,
.header-start__logo,
.header__logo {
  color: #EDEAE3 !important;
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/logo/logo.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/logo/logo.svg') center/contain no-repeat !important;
  background-image: none !important;
}

/* topbar-entries hover/active amber tint */
#header .app-menu-entry a:hover,
#header .app-menu-entry.active,
#header .app-menu-entry.active > a,
.app-menu-main .app-menu-entry:hover,
.app-menu-main .app-menu-entry--active {
  background: rgba(212, 165, 116, 0.12) !important;
  border-radius: 8px !important;
}

#header .app-menu-entry a:hover .app-menu-entry__label,
#header .app-menu-entry.active .app-menu-entry__label {
  color: #D4A574 !important;
}

#header .header-right,
#header #user-menu,
#header .header-menu,
#header .unified-search__input-wrapper input {
  color: #EDEAE3 !important;
}

/* ── 05 · app-navigation sidebar  ────────────────────────────────── */

.app-navigation,
#app-navigation,
#app-navigation-vue {
  background: #0F0F10 !important;
  border-right: 1px solid #26262A !important;
}

.app-navigation-entry,
.app-navigation__list li .app-navigation-entry__link,
.app-navigation-entry-wrapper {
  color: #EDEAE3 !important;
}

/* "All files" Permanent-Box entfernen — alle möglichen NC-Strukturen abdecken.
   NICHT --color-primary-element umschreiben (bricht Icon-Farben). */
.app-navigation__header,
.app-navigation-header,
nav.app-navigation > .app-navigation__header,
nav.app-navigation > .app-navigation-header,
#app-navigation-vue > .app-navigation__header,
#app-navigation-vue > .app-navigation-header,
.app-navigation__header *,
.app-navigation-header *,
/* First child of nav (may be the "All files" tile) */
#app-navigation-vue .files-navigation > *:first-child,
#app-navigation-vue .files-navigation > *:first-child *,
.app-navigation > .app-navigation__list > li:first-child,
.app-navigation > .app-navigation__list > li:first-child > *,
.files-navigation > .app-navigation__list > li:first-child,
.files-navigation > .app-navigation__list > li:first-child > *,
/* Explicit view/current breadcrumb attributes */
[data-cy="files-navigation-item-files"],
[data-cy*="all-files"],
[href$="/apps/files/files"],
[href$="/apps/files"],
/* Focus / visited states */
.app-navigation-entry:focus,
.app-navigation-entry:focus-visible,
.app-navigation-entry:focus-within,
.app-navigation-entry a:focus,
.app-navigation-entry a:visited {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* Files-Navigation Items (.files-navigation__item) — ECHTE Klasse aus NC33 kompiliert */
.files-navigation__item,
li.files-navigation__item,
.files-navigation__item > *,
li.files-navigation__item > *,
[data-cy-files-navigation-item] {
  background: transparent !important;
  background-color: transparent !important;
}

/* Kompakter: weniger Höhe und Abstand zwischen Nav-Items */
.files-navigation__item,
li.files-navigation__item {
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.files-navigation__item > a,
.files-navigation__item > button,
.files-navigation__item .app-navigation-entry-wrapper {
  min-height: 30px !important;
  padding: 2px 12px !important;
}

/* Files-Navigation: Hover-State mit subtiler amber-Farbe (Override NC default) */
.files-navigation__item:hover,
li.files-navigation__item:hover,
.files-navigation__item:hover > a,
.files-navigation__item:hover > button,
.files-navigation__item:hover .app-navigation-entry-wrapper {
  background: rgba(212, 165, 116, 0.10) !important;
  background-color: rgba(212, 165, 116, 0.10) !important;
  color: #D4A574 !important;
}

/* Chevron-/Dropdown-Toggle (rechter Bereich) — transparent, keine separate Kante */
.files-navigation__item .action-item__menutoggle,
.files-navigation__item button.action-item__menutoggle,
.files-navigation__item .button-vue.icon-collapse,
.files-navigation__item .app-navigation-entry__utils button,
.files-navigation__item:hover .action-item__menutoggle,
.files-navigation__item:hover button.action-item__menutoggle,
.files-navigation__item:hover .button-vue.icon-collapse {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Aktiv/Ausgewählt: Dunkelambra-bg + cream-text (5.5:1 Kontrast, AA).
   Robuste Selektoren für Vue-scoped wrapper-active-Varianten. */
.files-navigation__item.active,
li.files-navigation__item.active,
.files-navigation__item--active,
li.files-navigation__item--active,
[data-cy-files-navigation-item].active,
[data-cy-files-navigation-item][aria-current],
[data-cy-files-navigation-item][aria-selected="true"],
.files-navigation__item .app-navigation-entry-wrapper--active,
.files-navigation__item a.active,
.files-navigation__item a.router-link-active,
.files-navigation__item a.router-link-exact-active,
.files-navigation__item [aria-current="page"],
.files-navigation__item > .active,
li.files-navigation__item > a.active {
  --color-primary-element: #6B4523 !important;
  --color-primary: #6B4523 !important;
  background: #6B4523 !important;
  background-color: #6B4523 !important;
  box-shadow: none !important;
  color: #EDEAE3 !important;
  border-radius: 8px !important;
}

/* Kinder-Elemente der aktiven Nav-Items — bg dunkelambra, text cream */
.files-navigation__item.active > a,
.files-navigation__item.active > button,
.files-navigation__item.active .app-navigation-entry__link,
.files-navigation__item.active .app-navigation-entry__name,
.files-navigation__item--active > a,
.files-navigation__item--active > button,
.files-navigation__item--active .app-navigation-entry__link,
.files-navigation__item--active .app-navigation-entry__name,
[data-cy-files-navigation-item].active > a,
[data-cy-files-navigation-item].active > button,
.files-navigation__item a.active .app-navigation-entry__name,
.files-navigation__item .app-navigation-entry-wrapper--active .app-navigation-entry__name {
  background: transparent !important;
  background-color: transparent !important;
  color: #EDEAE3 !important;
  font-weight: 600 !important;
}

.app-navigation-entry:hover,
.app-navigation-entry a:hover,
.app-navigation-entry--opened {
  background: rgba(212, 165, 116, 0.10) !important;
  color: #D4A574 !important;
  border-radius: 8px !important;
}

.app-navigation-entry a {
  color: #EDEAE3 !important;
}

/* sektions-eyebrow (caption) — mono uppercase amber leader */
.app-navigation__list > li > .app-navigation-caption,
.app-navigation-caption__name {
  color: #8A8680 !important;
  font-family: 'JetBrains Mono Variable', 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.app-navigation__list > li > .app-navigation-caption::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  background: #D4A574;
  margin-right: 8px;
  vertical-align: middle;
  opacity: 0.7;
}

/* ── 06 · app-content background  ────────────────────────────────── */

#app-content,
.app-content {
  background: #0F0F10 !important;
  color: #EDEAE3 !important;
  position: relative;
}

/* buttons primary */
.button-vue--vue-primary,
.button-vue[data-variant="primary"],
.nc-button--primary,
button.primary,
input.primary,
button[type="submit"].primary {
  background: #D4A574 !important;
  color: #0F0F10 !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-family: 'Inter Variable', 'Inter', sans-serif !important;
}

.button-vue--vue-primary:hover,
.button-vue[data-variant="primary"]:hover,
.nc-button--primary:hover,
button.primary:hover {
  background: #E8C493 !important;
}

/* ── 07 · dashboard hero-bg (blueprint + amber trace)  ──────────── */

#app-dashboard {
  position: relative;
  isolation: isolate;
  background: #0F0F10 !important;
}

#app-dashboard::before {
  content: '';
  position: fixed;
  inset: 50px 0 0 300px;  /* unter topbar, rechts von sidebar */
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(237,234,227,0.030) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(237,234,227,0.030) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(rgba(237,234,227,0.012) 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(90deg, rgba(237,234,227,0.012) 1px, transparent 1px) 0 0 / 8px 8px,
    radial-gradient(ellipse at 75% 70%, rgba(212,165,116,0.10) 0%, transparent 55%),
    #0F0F10;
  mask-image: radial-gradient(ellipse at 50% 50%, black 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 40%, transparent 85%);
  opacity: 0.9;
}

/* kleine amber-trace rechts unten (gepulst, wenn motion ok) */
#app-dashboard::after {
  content: '';
  position: fixed;
  right: 40px;
  bottom: 40px;
  width: 220px;
  height: 1px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(212,165,116,0.55) 50%, transparent 100%);
  animation: cs-trace 6s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes cs-trace {
  0%, 100% { opacity: 0.2; transform: translateX(0); }
  50%      { opacity: 0.9; transform: translateX(-40px); }
}

@media (prefers-reduced-motion: reduce) {
  #app-dashboard::after { animation: none; opacity: 0.4; }
}

/* dashboard panels — hairline, 12px radius */
#app-dashboard .panel,
#app-dashboard .dashboard__panel,
.dashboard-panel,
.widget-default {
  background: #1A1A1C !important;
  border: 1px solid #26262A !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.3) !important;
  transition: border-color 220ms cubic-bezier(.4,0,.2,1),
              transform 220ms cubic-bezier(.4,0,.2,1) !important;
}

#app-dashboard .panel:hover,
#app-dashboard .dashboard__panel:hover,
.dashboard-panel:hover {
  border-color: rgba(212, 165, 116, 0.40) !important;
  transform: translateY(-2px);
}

#app-dashboard .panel__heading,
#app-dashboard .dashboard__panel__header,
.widget-default__title {
  color: #EDEAE3 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* ── 08 · files-app row-icons (file-type overrides)  ────────────── */

.files-list {
  background: #0F0F10 !important;
}

.files-list__row {
  border-bottom: 1px solid #1A1A1C !important;
}

.files-list__row:hover {
  background: #1A1A1C !important;
}

.files-list__row--selected,
.files-list__row.selected {
  background: rgba(212, 165, 116, 0.08) !important;
}

.files-list__row-name a,
.files-list__column-name a {
  color: #EDEAE3 !important;
}

.files-list__row-name a:hover,
.files-list__column-name a:hover {
  color: #D4A574 !important;
}

/* file-icons via mask (behält color-kaskade) */
.files-list__row-icon,
.files-list__row .files-list__file-icon {
  color: #EDEAE3 !important;
}

.files-list__row--folder .files-list__row-icon,
.files-list__row[data-file-type="folder"] .files-list__row-icon {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/files/folder.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/files/folder.svg') center/contain no-repeat !important;
}

.files-list__row[data-mime="application/pdf"] .files-list__row-icon {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/files/pdf.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/files/pdf.svg') center/contain no-repeat !important;
}

.files-list__row[data-mime^="image/"] .files-list__row-icon {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/files/img.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/files/img.svg') center/contain no-repeat !important;
}

.files-list__row[data-mime^="application/vnd.oasis.opendocument.text"] .files-list__row-icon,
.files-list__row[data-mime^="application/msword"] .files-list__row-icon,
.files-list__row[data-mime^="application/vnd.openxmlformats-officedocument.wordprocessingml"] .files-list__row-icon {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/files/doc.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/files/doc.svg') center/contain no-repeat !important;
}

.files-list__row[data-mime^="application/vnd.oasis.opendocument.spreadsheet"] .files-list__row-icon,
.files-list__row[data-mime^="application/vnd.ms-excel"] .files-list__row-icon,
.files-list__row[data-mime^="application/vnd.openxmlformats-officedocument.spreadsheetml"] .files-list__row-icon {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/files/sheet.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/files/sheet.svg') center/contain no-repeat !important;
}

/* breadcrumb amber hover */
.breadcrumb__crumb a,
.files-breadcrumbs__crumb a,
.breadcrumb__crumb-title {
  color: #8A8680 !important;
}

.breadcrumb__crumb a:hover,
.files-breadcrumbs__crumb a:hover {
  color: #D4A574 !important;
}

/* ── 09 · app-menu icon-overrides (topbar)  ─────────────────────── */

#header .app-menu-entry .app-menu-entry__icon,
.app-menu-main .app-menu-entry .app-menu-entry__icon {
  color: #EDEAE3 !important;
  transition: color 220ms cubic-bezier(.4,0,.2,1);
}

#header .app-menu-entry:hover .app-menu-entry__icon,
#header .app-menu-entry.active .app-menu-entry__icon {
  color: #D4A574 !important;
}

.app-menu-entry[data-app="files"] .app-menu-entry__icon {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/apps/files.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/apps/files.svg') center/contain no-repeat !important;
}

.app-menu-entry[data-app="dashboard"] .app-menu-entry__icon {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/apps/dashboard.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/apps/dashboard.svg') center/contain no-repeat !important;
}

.app-menu-entry[data-app="mail"] .app-menu-entry__icon {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/apps/mail.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/apps/mail.svg') center/contain no-repeat !important;
}

.app-menu-entry[data-app="contacts"] .app-menu-entry__icon {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/apps/contacts.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/apps/contacts.svg') center/contain no-repeat !important;
}

.app-menu-entry[data-app="calendar"] .app-menu-entry__icon {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/apps/calendar.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/apps/calendar.svg') center/contain no-repeat !important;
}

.app-menu-entry[data-app="deck"] .app-menu-entry__icon {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/apps/deck.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/apps/deck.svg') center/contain no-repeat !important;
}

.app-menu-entry[data-app="tasks"] .app-menu-entry__icon {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/apps/tasks.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/apps/tasks.svg') center/contain no-repeat !important;
}

.app-menu-entry[data-app="assistant"] .app-menu-entry__icon {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/apps/assistant.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/apps/assistant.svg') center/contain no-repeat !important;
}

.app-menu-entry[data-app="activity"] .app-menu-entry__icon {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/apps/activity.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/apps/activity.svg') center/contain no-repeat !important;
}

.app-menu-entry[data-app^="external_"] .app-menu-entry__icon,
.app-menu-entry[data-app^="external-"] .app-menu-entry__icon {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/apps/external.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/apps/external.svg') center/contain no-repeat !important;
}

/* topbar helpers: notifications, search, user, logout, settings, home */
.notifications-button,
#header .icon-notifications,
.header-menu__trigger .icon-notifications {
  color: #EDEAE3 !important;
}

#header .icon-search,
.unified-search__input-wrapper .icon-search {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/apps/search.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/apps/search.svg') center/contain no-repeat !important;
}

/* user-menu dropdown items */
.user-menu__item--settings .icon-settings,
.user-menu__item[data-item="settings"] .icon {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/apps/settings.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/apps/settings.svg') center/contain no-repeat !important;
}

.user-menu__item--logout .icon-logout,
.user-menu__item[data-item="logout"] .icon {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/apps/logout.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/apps/logout.svg') center/contain no-repeat !important;
}

/* breadcrumb home */
.breadcrumb__crumb--first .icon-home,
.files-breadcrumbs__crumb:first-child .icon-home {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/apps/home.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/apps/home.svg') center/contain no-repeat !important;
}

/* files toolbar upload/share */
.icon-upload,
.files-list__header-actions .icon-upload {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/apps/upload.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/apps/upload.svg') center/contain no-repeat !important;
}

.icon-shared,
.icon-share-white,
.icon-share {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/apps/share.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/apps/share.svg') center/contain no-repeat !important;
}

/* ── 10 · sidebar nav icon-overrides (settings-sections)  ───────── */

#app-navigation .app-navigation-entry-icon.icon-files,
#app-navigation-vue .app-navigation-entry-icon.icon-files {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/apps/files.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/apps/files.svg') center/contain no-repeat !important;
}

#app-navigation .app-navigation-entry-icon.icon-settings,
.app-navigation-entry-icon.icon-settings {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/apps/settings.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/apps/settings.svg') center/contain no-repeat !important;
}

#app-navigation .app-navigation-entry-icon.icon-user,
.app-navigation-entry-icon.icon-user {
  background: currentColor !important;
  -webkit-mask: url('/themes/cloudstack/core/img/icons/apps/user.svg') center/contain no-repeat !important;
  mask: url('/themes/cloudstack/core/img/icons/apps/user.svg') center/contain no-repeat !important;
}

/* ── 11 · assistant-rename (css-only display-override)  ─────────── */
/* app heißt intern "assistant" — wir rendern label "stackschmiede-assistent".
   caveat: screen-reader sprechen original-label (l10n-patch = open point). */

.app-menu-entry[data-app="assistant"] .app-menu-entry__label {
  font-size: 0 !important;
  position: relative;
}

.app-menu-entry[data-app="assistant"] .app-menu-entry__label::after {
  content: 'stackschmiede-assistent';
  font-size: 13px !important;
  font-family: 'Inter Variable', 'Inter', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  color: inherit;
  white-space: nowrap;
}

/* assistant dialog/modal header — rename ebenfalls */
.assistant-modal__header h2,
.assistant-modal__title,
.modal-container[class*="assistant"] .modal-header__name,
.dialog[class*="assistant"] .dialog__name {
  font-size: 0 !important;
}

.assistant-modal__header h2::after,
.assistant-modal__title::after,
.modal-container[class*="assistant"] .modal-header__name::after,
.dialog[class*="assistant"] .dialog__name::after {
  content: 'stackschmiede-assistent';
  font-size: 17px !important;
  font-family: 'Inter Variable', 'Inter', sans-serif !important;
  font-weight: 640;
  letter-spacing: -0.02em;
  color: #EDEAE3;
}

/* breadcrumbs/back-buttons "Assistant" → "stackschmiede-assistent"
   hebt nur textuelles label aus breadcrumbs/headings — restliche
   strings bleiben nc-default bis l10n-patch. */

/* ── 12 · selection, focus-ring, scrollbars  ────────────────────── */

::selection {
  background: #D4A574 !important;
  color: #0F0F10 !important;
}

:focus-visible {
  outline: 2px solid #D4A574 !important;
  outline-offset: 3px !important;
}

/* scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: #3A3A40 #0F0F10;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: #0F0F10;
}

*::-webkit-scrollbar-thumb {
  background: #3A3A40;
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
  background: #D4A574;
}

/* ── 13 · modals, toasts, popups  ───────────────────────────────── */

.modal-container,
.modal-wrapper .modal-container,
.dialog {
  background: #1A1A1C !important;
  border: 1px solid #26262A !important;
  border-radius: 12px !important;
  color: #EDEAE3 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 32px -8px rgba(0,0,0,.7) !important;
}

.modal-header,
.dialog__header {
  background: transparent !important;
  border-bottom: 1px solid #26262A !important;
  color: #EDEAE3 !important;
}

.modal-header__name,
.dialog__name,
.dialog__title {
  color: #EDEAE3 !important;
  font-weight: 640 !important;
  letter-spacing: -0.01em !important;
}

/* toast (vue-toastification used by NC) */
.toast,
.toast-default,
.toastify,
.toast-info,
.toast-success,
.toast-warning,
.toast-error {
  background: #1A1A1C !important;
  color: #EDEAE3 !important;
  border: 1px solid #26262A !important;
  border-radius: 10px !important;
}

.toast-success { border-left: 3px solid #7FB069 !important; }
.toast-warning { border-left: 3px solid #E0A96D !important; }
.toast-error   { border-left: 3px solid #C97064 !important; }
.toast-info    { border-left: 3px solid #D4A574 !important; }

/* popover */
.v-popper__popper,
.popover,
.popovermenu {
  background: #1A1A1C !important;
  border: 1px solid #26262A !important;
  border-radius: 10px !important;
  color: #EDEAE3 !important;
}

/* ── 14 · form-controls (input/select/textarea/checkbox)  ──────── */

#body-settings .section,
#body-user .section,
.settings-section {
  background: #1A1A1C !important;
  border: 1px solid #26262A !important;
  border-radius: 12px !important;
  color: #EDEAE3 !important;
}

#body-settings table tr:nth-child(even),
#body-user table tr:nth-child(even) {
  background: #141415 !important;
}

#body-settings table tr:nth-child(odd),
#body-user table tr:nth-child(odd) {
  background: #1A1A1C !important;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  background: #0F0F10 !important;
  border: 1px solid #26262A !important;
  color: #EDEAE3 !important;
  border-radius: 8px !important;
  font-family: 'Inter Variable', 'Inter', sans-serif !important;
  transition: border-color 220ms cubic-bezier(.4,0,.2,1),
              box-shadow 220ms cubic-bezier(.4,0,.2,1) !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  border-color: #D4A574 !important;
  box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.25) !important;
  outline: none !important;
}

/* checkboxen/radios — amber fill statt nc-grün */
input[type="checkbox"]:checked,
input[type="checkbox"].checkbox:checked + label::before,
.checkbox-radio-switch--checked .checkbox-radio-switch__icon,
.checkbox-radio-switch.checkbox-radio-switch-checkbox--checked .checkbox-radio-switch__icon {
  background-color: #D4A574 !important;
  border-color: #D4A574 !important;
  color: #0F0F10 !important;
}

/* switch (nc-vue component) */
.checkbox-radio-switch-switch.checkbox-radio-switch--checked .checkbox-radio-switch__icon,
.checkbox-radio-switch-switch[aria-checked="true"] .checkbox-radio-switch__icon {
  background-color: #D4A574 !important;
  border-color: #D4A574 !important;
}

/* progressbar amber */
progress,
.progressbar,
.vue-progressbar {
  accent-color: #D4A574 !important;
}

progress::-webkit-progress-value,
.progressbar__value {
  background: #D4A574 !important;
}

progress::-moz-progress-bar {
  background: #D4A574 !important;
}

/* range-slider amber */
input[type="range"] {
  accent-color: #D4A574 !important;
}

input[type="range"]::-webkit-slider-thumb {
  background: #D4A574 !important;
}

input[type="range"]::-moz-range-thumb {
  background: #D4A574 !important;
}

/* links im content amber auf hover */
#app-content a,
.app-content a {
  color: #EDEAE3;
  transition: color 150ms cubic-bezier(.4,0,.2,1);
}

#app-content a:hover,
.app-content a:hover {
  color: #D4A574;
}

/* ── 15 · hero-bg fix: volle breite + sanfter fade  ─────────────── */
/* override section 07: inset 50px 0 0 300px → volle fläche; sidebar/topbar
   haben eigenen bg und überdecken den grid automatisch. sanfterer mask. */

#app-dashboard::before {
  inset: 0 !important;
  background:
    linear-gradient(rgba(237,234,227,0.030) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(237,234,227,0.030) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(rgba(237,234,227,0.012) 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(90deg, rgba(237,234,227,0.012) 1px, transparent 1px) 0 0 / 8px 8px,
    radial-gradient(ellipse at 65% 55%, rgba(212,165,116,0.10) 0%, transparent 60%),
    #0F0F10 !important;
  mask-image: radial-gradient(ellipse 100% 90% at 50% 50%, black 30%, rgba(0,0,0,0.6) 65%, transparent 95%) !important;
  -webkit-mask-image: radial-gradient(ellipse 100% 90% at 50% 50%, black 30%, rgba(0,0,0,0.6) 65%, transparent 95%) !important;
  opacity: 0.75 !important;
}

/* ── 16 · grüne badges/+-icons → amber (activity-widget)  ──────── */

.activity-icon--add,
.activity-icon--create,
.activity-event-icon,
img[src*="/activity/img/add"],
img[src*="actions/add.svg"],
img[src$="/add.svg"],
.dashboard__list-item img[src*="activity"],
.widget-default__item img[src*="activity"],
[class*="dashboard"] img[src*="/activity/"] {
  /* exakt #D4A574 via https://codepen.io/sosuke/pen/Pjoqqp */
  filter: invert(71%) sepia(24%) saturate(630%) hue-rotate(352deg) brightness(94%) contrast(88%) !important;
}

/* ── 17 · unified-search modal — full backdrop, centered panel  ─── */

.unified-search__dropdown,
.v-popper__popper.v-popper--theme-dropdown.v-popper__popper--show-from,
.unified-search-modal,
.modal-container.unified-search {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  background: rgba(0, 0, 0, 0.55) !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 10vh !important;
}

.unified-search__panel,
.unified-search__container,
.unified-search__form,
.unified-search-modal > .modal-wrapper,
.unified-search-modal .modal-container__content {
  width: min(640px, 90vw) !important;
  max-width: 640px !important;
  background: #1A1A1C !important;
  border: 1px solid #26262A !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 8px 40px -8px rgba(0,0,0,0.8) !important;
  margin: 0 !important;
}

.unified-search__input-wrapper,
.unified-search input[type="search"],
.unified-search input[type="text"] {
  width: 100% !important;
  background: #0F0F10 !important;
  border: 1px solid #26262A !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  color: #EDEAE3 !important;
}

.unified-search__input-wrapper:focus-within,
.unified-search input:focus {
  border-color: #D4A574 !important;
  box-shadow: 0 0 0 2px rgba(212,165,116,0.2) !important;
}

/* filter chips (places / date / people) */
.unified-search__filters button,
.unified-search__filters .button-vue {
  background: transparent !important;
  border: 1px solid #26262A !important;
  color: #EDEAE3 !important;
  font-size: 13px !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
}

.unified-search__filters button:hover {
  background: rgba(212, 165, 116, 0.1) !important;
  border-color: rgba(212, 165, 116, 0.4) !important;
  color: #D4A574 !important;
}

/* ── 18 · assistant full rebrand (extends section 11)  ──────────── */

/* title-override: "Nextcloud Assistant" → "cloudstack assistant" */
.assistant__header h2,
.assistant-dialog__title,
.modal-header:has(svg.assistant-icon) .modal-header__name,
[class*="Assistant"] .modal-header__name {
  font-size: 0 !important;
}

.assistant__header h2::after,
.assistant-dialog__title::after,
.modal-header:has(svg.assistant-icon) .modal-header__name::after,
[class*="Assistant"] .modal-header__name::after {
  content: "cloudstack assistant" !important;
  font-size: 16px !important;
  font-family: 'Inter Variable', 'Inter', sans-serif !important;
  font-weight: 640 !important;
  color: #EDEAE3 !important;
  letter-spacing: -0.01em !important;
}

/* sparkle-icon (lila gradient) → amber via filter */
.assistant__empty-state svg,
.assistant__empty-state-icon svg,
.assistant__header svg,
.assistant svg[class*="sparkle"],
.assistant svg[class*="AI"],
svg.material-design-icon--creation {
  filter: brightness(0) invert(71%) sepia(24%) saturate(630%) hue-rotate(352deg) brightness(94%) contrast(88%) !important;
}

/* tab-buttons (chat / text / audio / translate / …) — schlanker */
.assistant__tabs button,
.assistant__tabs .button-vue,
.assistant__header-tabs button,
.assistant-tabs__tab,
div:has(> button[class*="Chat-with"]) button {
  min-height: 30px !important;
  padding: 5px 12px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: 1px solid #26262A !important;
  color: #EDEAE3 !important;
  margin-right: 4px !important;
}

.assistant__tabs button:hover,
.assistant-tabs__tab:hover {
  background: rgba(212, 165, 116, 0.1) !important;
  border-color: rgba(212, 165, 116, 0.4) !important;
  color: #D4A574 !important;
}

/* aktiver tab — amber (statt lila-gradient) */
.assistant__tabs button.active,
.assistant__tabs button[aria-selected="true"],
.assistant-tabs__tab--active,
.assistant__tabs .button-vue--active,
button[class*="Chat-with-ai"].active,
button[class*="chat-with-ai"][aria-pressed="true"] {
  background: linear-gradient(135deg, #D4A574 0%, #E8C493 100%) !important;
  color: #0F0F10 !important;
  border-color: #D4A574 !important;
  font-weight: 600 !important;
}

/* "new conversation" button + conversation items */
.assistant__sidebar button,
.assistant__conversation-item {
  min-height: 30px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
}

/* input area */
.assistant__input,
.assistant__input textarea,
.assistant textarea[placeholder*="message"],
.assistant input[placeholder*="Type"] {
  font-size: 14px !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
}

/* close-button (X oben rechts) */
.assistant__header .close-button,
.assistant__header button[aria-label*="close"i],
.assistant__header button[aria-label*="schließen"i] {
  width: 28px !important;
  height: 28px !important;
  padding: 4px !important;
}

/* Phase 4: bubble-label (z.b. "Nextcloud Assistant" über dem chat-bubble) */
.assistant-bubble__label,
.assistant-chat__bubble-label,
.assistant-message__author,
.assistant-message__header,
.assistant__bubble__header,
.assistant-chat-message__header,
.chat-message__author,
[class*="bubble"][class*="header"],
[class*="bubble"][class*="author"],
.assistant__empty-state h2,
.assistant__empty-state h3,
.assistant__empty-state-title {
  font-size: 0 !important;
  line-height: 1 !important;
}
.assistant-bubble__label::after,
.assistant-chat__bubble-label::after,
.assistant-message__author::after,
.assistant-message__header::after,
.assistant__bubble__header::after,
.assistant-chat-message__header::after,
.chat-message__author::after,
[class*="bubble"][class*="header"]::after,
[class*="bubble"][class*="author"]::after,
.assistant__empty-state h2::after,
.assistant__empty-state h3::after,
.assistant__empty-state-title::after {
  content: "cloudstack assistant" !important;
  font-size: 14px !important;
  font-family: 'Inter Variable', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: #D4A574 !important;
  letter-spacing: -0.01em !important;
  display: inline-block !important;
}

/* Phase 4: assistant-icon hart austauschen (statt nur filter) —
   mask-swap auf apps/assistant.svg, damit sci-fi-hud-icon sichtbar
   statt des lila-sparkle-defaults.                                 */
.assistant__header svg,
.assistant__empty-state svg,
.assistant__empty-state-icon svg,
.assistant__empty-state-icon,
.assistant-modal__icon svg,
.assistant svg[class*="sparkle" i],
.assistant svg[class*="creation" i],
.assistant svg[class*="AI" i],
svg.material-design-icon--creation,
button[class*="Chat-with-ai"] svg,
button[class*="chat-with-ai"] svg {
  -webkit-mask-image: url("/themes/cloudstack/core/img/icons/apps/assistant.svg") !important;
  mask-image: url("/themes/cloudstack/core/img/icons/apps/assistant.svg") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  background: #D4A574 !important;
  fill: transparent !important;
  stroke: transparent !important;
  filter: none !important;
}

/* Phase 4: logo-icon swap — div.logo / div.logoicon / .logologoicon
   überall wo NC das default-nc-logo zeigt, das cloudstack-login-logo
   einsetzen (identisch zum anmelde-logo).                            */
div.logologoicon,
div.logo-logoicon,
div.logo.logoicon,
div.logo-icon,
.logologoicon,
.logo-logoicon,
.logo.logoicon,
.logo-icon,
#header .logo,
#header .header-logo,
.header__logo-icon,
.header-start__logo,
#header-logo,
.guest-box__icon,
#firstrunwizard-header .logo,
.app-menu__logo,
.login-box__logo {
  background-image: url("/themes/cloudstack/core/img/logo/logo.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  color: #EDEAE3 !important;
}

/* falls NC das logo als <img> rendert (nicht als bg-div) — content-swap */
div.logologoicon img,
div.logo.logoicon img,
div.logo-icon img,
.logo-logoicon img,
.logologoicon img,
.header__logo-icon img,
#header-logo img,
.header-start__logo img {
  content: url("/themes/cloudstack/core/img/logo/logo.svg") !important;
}

/* ── 19 · buttons global — schlanker (desktop)  ────────────────── */

.button-vue,
button.action-button,
a.button,
input[type="submit"],
input[type="button"] {
  min-height: 32px !important;
  padding: 6px 14px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  font-family: 'Inter Variable', 'Inter', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
}

/* icon-only buttons — quadratisch kompakt */
.button-vue--icon-only,
.action-item__menutoggle,
button.action-button[aria-label]:not(:has(span:not(.material-design-icon))) {
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 6px !important;
}

/* primary button amber (falls nicht schon) */
.button-vue--vue-primary,
.button-vue[data-variant="primary"],
button.primary {
  background: #D4A574 !important;
  color: #0F0F10 !important;
  border: none !important;
  font-weight: 600 !important;
}

.button-vue--vue-primary:hover,
button.primary:hover {
  background: #E8C493 !important;
}

/* mobile — a11y touch-targets 40px */
@media (max-width: 768px) {
  .button-vue,
  button.action-button,
  a.button,
  input[type="submit"],
  input[type="button"],
  .button-vue--icon-only,
  .action-item__menutoggle {
    min-height: 40px !important;
    min-width: 40px !important;
    padding: 8px 16px !important;
  }
}

/* ── 20 · mail-app: full-width liste, kein preview-pane  ────────── */
/* gmail-style: liste füllt den content, klick öffnet mail full-width. */

/* ohne offene mail: envelope-list volle breite */
.app-content[class*="mail"]:not(:has(.mail-message-viewer)):not(:has(.message)) .app-content-list,
[id="app-content"]:not(:has(.mail-message-viewer)):not(:has(.mail-message)) .envelope-list,
.mail-layout:not(:has(.mail-message-viewer)):not(:has(.mail-message)) .envelope-list-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  flex: 1 1 100% !important;
}

/* mit offener mail: preview full, liste hidden */
.app-content[class*="mail"]:has(.mail-message-viewer) .app-content-list,
[id="app-content"]:has(.mail-message-viewer) .envelope-list,
[id="app-content"]:has(.mail-message) .envelope-list-wrapper,
.mail-layout:has(.mail-message-viewer) .envelope-list,
.mail-layout:has(.mail-message-viewer) .envelope-list-wrapper {
  display: none !important;
}

.app-content[class*="mail"]:has(.mail-message-viewer) .mail-message-viewer,
[id="app-content"]:has(.mail-message-viewer) .mail-message-viewer,
.mail-layout:has(.mail-message-viewer) .mail-message-viewer,
.mail-layout:has(.mail-message) .mail-message {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

/* kompakte envelope-zeilen (gmail-style) */
.envelope,
.mail-envelope,
li.envelope,
.envelope-list__item,
.app-content-list-item.envelope {
  padding: 6px 16px !important;
  min-height: 38px !important;
  border-bottom: 1px solid #1A1A1C !important;
  gap: 12px !important;
  display: flex !important;
  align-items: center !important;
}

.envelope:hover,
.mail-envelope:hover {
  background: rgba(212, 165, 116, 0.05) !important;
}

.envelope--selected,
.envelope.active,
.envelope-list__item--active {
  background: rgba(212, 165, 116, 0.12) !important;
}

.envelope__subject,
.mail-envelope__subject {
  font-weight: 500 !important;
  font-size: 14px !important;
  color: #EDEAE3 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.envelope__sender,
.mail-envelope__sender,
.envelope__avatar + span {
  font-size: 13px !important;
  color: #8A8680 !important;
}

.envelope__date,
.mail-envelope__date,
.envelope time {
  font-size: 12px !important;
  color: #8A8680 !important;
  font-family: 'JetBrains Mono Variable', monospace !important;
  white-space: nowrap;
}

/* ── 21 · grün-audit: verbleibende nc-default-greens → brand-palette ── */

/* nc-vue-vars global: success = brand-sage, primary-element = dunkelambra (aktiv-state)
   WICHTIG: primary-element MUSS #6B4523 sein, sonst konflikt mit body#body-user Zeile 27.
   Helle #D4A574 nur noch für CTA-Buttons, Progressbars, Check-Accent. */
:root,
body,
body#body-user,
body#body-settings,
body#body-login,
body#body-public {
  --color-success: #7FB069 !important;
  --color-primary-element: #6B4523 !important;
  --color-primary-element-default: #6B4523 !important;
  --color-primary-element-text: #EDEAE3 !important;
  --color-primary-element-light: rgba(107, 69, 35, 0.15) !important;
  --color-primary-element-light-text: #7A4F2A !important;
  --color-primary-element-hover: #8B5E3C !important;
  --color-checkbox-checked-background: #D4A574 !important;
  --color-checkbox-checked-foreground: #0F0F10 !important;
  --color-checkbox-border-color: #8A8680 !important;
  --color-primary: #6B4523 !important;
  --color-primary-default: #6B4523 !important;
}

/* user-status "online" indicator → sage-green (brand) */
.user-status-online-icon,
.user-status-menu-item__status--online::before,
[class*="user-status"][class*="online"] .icon,
.avatar-status--online {
  background-color: #7FB069 !important;
  color: #7FB069 !important;
}

/* set-status button (dashboard) */
.user-status-menu-item,
.user-status__button,
button.user-status-menu-item,
[data-user-status-menu] button:first-child {
  background: rgba(212, 165, 116, 0.10) !important;
  color: #D4A574 !important;
  border: 1px solid rgba(212, 165, 116, 0.30) !important;
  border-radius: 8px !important;
}

/* success-badges/labels */
.label--success,
.notecard--success,
.status-success,
.icon-success,
.icon-checkmark-color,
.color-success {
  background-color: rgba(127, 176, 105, 0.15) !important;
  color: #7FB069 !important;
  border-color: #7FB069 !important;
}

.icon-checkmark {
  color: #7FB069 !important;
}

/* progressbars, loading-indicators */
.progress-bar,
.progressbar,
progress {
  accent-color: #D4A574 !important;
}

progress::-webkit-progress-value,
.progress-bar[style*="width"] {
  background: #D4A574 !important;
}

/* checkboxen fallback */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  accent-color: #D4A574 !important;
}

/* nc-default "action buttons" die grün sind (rare) */
button.primary.success,
.action-button--success {
  background: #7FB069 !important;
  color: #0F0F10 !important;
}

/* ── 22 · grün-audit vertiefung (inline svg + event-farben)  ────── */
/* Bessere deckung: nc-default-greens (`#46BA61`, `#2F854D`, `#7B9E58`)
   in inline-SVGs (dashboard-widgets, calendar-events, activity-items)
   → brand-sage oder amber. */

/* alle inline-svg-paths mit nc-default-green-fills → amber */
svg path[fill="#46BA61"],
svg path[fill="#2F854D"],
svg path[fill="#7B9E58"],
svg path[fill="#368a54"],
svg path[fill="#65b379"],
svg path[fill="#00a878"],
svg path[style*="fill: rgb(70, 186, 97)"],
svg [style*="--color-success"] {
  fill: #D4A574 !important;
  color: #D4A574 !important;
}

/* activity/dashboard-widgets — alle kleinen +/tick/create-icons */
.widget-default .widget-default__item svg,
.dashboard__item svg,
.widget-default svg.activity-icon,
[class*="activity"] svg.icon-add,
[class*="activity"] svg[class*="create"],
[class*="activity"] svg[class*="upload"],
[class*="activity"] svg[class*="add"] {
  color: #D4A574 !important;
  fill: #D4A574 !important;
}

.widget-default .widget-default__item svg path,
.dashboard__item svg path,
[class*="activity"] svg[class*="add"] path,
[class*="activity"] svg[class*="create"] path {
  fill: #D4A574 !important;
}

/* "Upcoming events" calendar-widget: event-indicators */
[data-widget-id*="calendar"] .event,
[data-widget-id*="calendar"] .widget-default__item::before,
.calendar-widget__event,
.calendar-widget__list li::before {
  background-color: #6B8E7F !important;   /* brand-sage statt nc-grün */
  border-color: #6B8E7F !important;
}

.calendar-widget__event--all-day,
.upcoming-events__event {
  border-left: 3px solid #6B8E7F !important;
}

/* activity-timeline grüner text "created" "added" etc. */
.activity-timeline .activity--positive,
.activity-entry__message [style*="color: green"],
.activity-entry__message [style*="#46BA61"],
.activity-entry__message [style*="#2F854D"] {
  color: #D4A574 !important;
}

/* badges mit grüner background (z.b. "new" label, counts) */
.counter-bubble,
.notification-badge,
span.badge:not(.label--warning):not(.label--danger) {
  background-color: #D4A574 !important;
  color: #0F0F10 !important;
}

/* mail-app: "junk"-count badge (32) im screenshot amber bubble */
.app-navigation-entry__counter {
  background: rgba(212, 165, 116, 0.2) !important;
  color: #D4A574 !important;
  font-weight: 600 !important;
  padding: 1px 8px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
}

/* ── 23 · sidebar navigation — schlanker (desktop)  ─────────────── */

/* GENERIC nav-item sizing — greift über alle apps (mail, activity, contacts,
   calendar, deck, tasks) via breite li/a/button-Selektoren im app-navigation-scope.
   Zielgröße: identisch zu files-navigation__item (30px, padding 2px 12px). */
.app-navigation li,
.app-navigation ul li,
.app-navigation ul > li,
.app-navigation__list li,
.app-navigation__list > li,
.app-navigation-entry,
#app-navigation-vue li,
#app-navigation-vue .app-navigation-entry,
.app-navigation li[class*="mailbox"],
.app-navigation li[class*="folder"],
.app-navigation li[class*="entry"],
ul.app-navigation__list > li,
ul[class*="navigation__list"] > li {
  min-height: 30px !important;
  height: auto !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Links/Buttons INNERHALB nav-items — einheitlich 30px + padding 2px 12px */
.app-navigation li > a,
.app-navigation li > button,
.app-navigation li > .app-navigation-entry-link,
.app-navigation li > .app-navigation-entry-wrapper,
.app-navigation li .app-navigation-entry-link,
.app-navigation li .app-navigation-entry-wrapper,
.app-navigation-entry-link,
.app-navigation-entry-wrapper,
.app-navigation-entry a,
.app-navigation-entry button,
.app-navigation-entry__link,
.app-navigation-entry__utils-wrapper,
.app-navigation__list a,
.app-navigation__list > li > a,
.app-navigation__list > li > button,
.app-navigation__list > li > .app-navigation-entry-link,
.app-navigation__list li[class*="mailbox"] > a,
.app-navigation__list li[class*="mailbox"] > button,
.app-navigation__list li[class*="mailbox"] > .app-navigation-entry-link,
.app-navigation__list li[class*="mailbox"] > .app-navigation-entry-wrapper,
.app-navigation__list li[class*="folder"] > a,
.app-navigation__list li[class*="folder"] > .app-navigation-entry-link {
  min-height: 30px !important;
  max-height: 34px !important;
  padding: 2px 12px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  font-size: 14px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
}

.app-navigation-entry__icon,
.app-navigation-entry__name {
  height: 20px !important;
  line-height: 20px !important;
  display: flex !important;
  align-items: center !important;
}

.app-navigation-entry__icon {
  min-width: 20px !important;
  width: 20px !important;
  height: 20px !important;
}

/* aktiv-state: dunkelambra bg + cream text (konsistent zu files-navigation__item.active, 5.5:1) */
.app-navigation-entry.active,
.app-navigation-entry--active,
li.active > .app-navigation-entry,
.app-navigation-entry-wrapper--active,
.app-navigation ul li.active > a,
.app-navigation-entry a.active,
.app-navigation-entry a.router-link-active,
.app-navigation-entry a.router-link-exact-active,
.app-navigation-entry [aria-current="page"] {
  background: #6B4523 !important;
  background-color: #6B4523 !important;
  box-shadow: none !important;
  color: #EDEAE3 !important;
  border-radius: 8px !important;
}

.app-navigation-entry.active .app-navigation-entry__name,
.app-navigation-entry--active .app-navigation-entry__name,
.app-navigation-entry-wrapper--active .app-navigation-entry__name,
.app-navigation-entry a.active .app-navigation-entry__name,
.app-navigation-entry a.router-link-active .app-navigation-entry__name {
  color: #EDEAE3 !important;
  font-weight: 600 !important;
}

/* utility-buttons rechts (edit-stift, menu-dots) — kleiner */
.app-navigation-entry__utils,
.app-navigation-entry__utils-wrapper,
.app-navigation-entry-menu button,
.app-navigation-entry button.action-item__menutoggle {
  min-width: 24px !important;
  width: 24px !important;
  height: 24px !important;
  padding: 2px !important;
}

.app-navigation-entry__utils svg,
.app-navigation-entry__utils img,
.app-navigation-entry button svg {
  width: 14px !important;
  height: 14px !important;
}

/* mobile fallback a11y */
@media (max-width: 768px) {
  .app-navigation-entry a,
  .app-navigation-entry__link {
    min-height: 40px !important;
    padding: 8px 16px !important;
  }
}

/* ── 24a · files-app header layout — "+ New" näher an Sidebar-Toggle  ─── */
/* NC-default hat großen Gap zwischen toggle und upload-picker — hier gap:8px + flex-start */
.files-list__header,
.files-list .files-list__header,
div[class*="files-list__header"]:not([class*="--breadcrumbs"]):not([class*="-button"]):not([class*="-actions"]) {
  gap: 8px !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Toggle-Button (sidebar collapse) — kein auto-margin, kein right-push */
.files-list__header > .app-navigation-toggle,
.files-list__header button[class*="navigation-toggle"],
.files-list__header button[aria-label*="navigation"],
.files-list__header button[aria-label*="sidebar"] {
  margin-right: 0 !important;
  margin-left: 0 !important;
  flex: 0 0 auto !important;
}

/* ── 24 · files-app new-button — schlanker, content-width  ──────── */

/* Container: nicht stretchen (NC setzt flex:1 auf den wrapper) */
div.upload-picker,
.files-list__header .upload-picker,
.files-list__header [class*="upload-picker"] {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 150px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Button selbst: content-width, nicht full-width */
.upload-picker button.button-vue--vue-primary,
.upload-picker .button-vue,
button.new-button,
.files-list__header-button,
.files-list__header button.action-button,
button[data-cy-files-new] {
  width: auto !important;
  flex: 0 0 auto !important;
  min-height: 32px !important;
  max-height: 36px !important;
  padding: 6px 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1 !important;
}

button.upload-picker__trigger,
.upload-picker > button:first-child {
  background: #D4A574 !important;
  color: #0F0F10 !important;
  border: none !important;
  font-weight: 600 !important;
}

button.upload-picker__trigger:hover,
.upload-picker > button:first-child:hover {
  background: #E8C493 !important;
}

.upload-picker__trigger-icon,
.files-list__header-button svg,
button.new-button svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

/* text im button: kein wrap, truncate falls überbreit */
.upload-picker__trigger span,
button.new-button span,
.files-list__header-button span {
  white-space: nowrap !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* ── 24b · files header "All files" breadcrumb/view-selector — einheitlich  ─── */
/* NC33 rendert "All files ˅" als Breadcrumb-Root in der Toolbar —
   gleiche Höhe wie nav-items (34px), kein stretched-button-look */

.files-list__header .breadcrumb,
.files-list__header--breadcrumbs,
.files-list__header .breadcrumbs {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Das "All files ˅" Root-Element der Breadcrumb */
.files-list__header .breadcrumb__crumb:first-child a,
.files-list__header .breadcrumb__crumb:first-child button,
.files-list__header .breadcrumb__crumb-title,
.breadcrumb__crumb .v-popper--theme-dropdown > button,
.breadcrumb__actions .action-item > button {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 36px !important;
  padding: 4px 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

/* ── 25 · folder-icons — sage (#6B8E7F) statt weiß  ─────────────── */

.files-list__row-icon-folder svg,
.files-list__row-icon--folder svg,
.files-list__row--folder .files-list__row-icon,
svg.folder-icon,
img[src*="filetypes/folder"],
.file-icon.folder,
.file-type-icon.folder,
[data-v-][class*="folder"] svg,
.icon-folder {
  color: #6B8E7F !important;
  fill: #6B8E7F !important;
}

.files-list__row-icon-folder svg path,
.files-list__row--folder svg path {
  fill: #6B8E7F !important;
  stroke: #6B8E7F !important;
}

/* grid-view folder-tiles */
.files-list--grid .files-list__row-icon,
.files-list--grid .files-list__row--folder img,
.files-grid__item--folder {
  color: #6B8E7F !important;
}

/* favorite folders: amber-tint */
.files-list__row--folder[data-favorited="true"] svg,
.files-list__row--folder.favorited svg {
  color: #D4A574 !important;
  fill: #D4A574 !important;
}

/* ── 26 · calendar-app — hover-box + edit-icon fix  ─────────────── */
/* vgl. section 23 für allgemeine nav, hier calendar-specifics */

.calendar-list__item,
.calendar-list li,
.app-navigation-entry.calendar-list__item {
  min-height: 34px !important;
  padding: 4px 10px !important;
  line-height: 1.2 !important;
}

.calendar-list__item__calendar,
.calendar-list__item .app-navigation-entry__name {
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
}

/* edit-stift rechts — kompakter */
.calendar-list__item button.action-item,
.calendar-list__item button[aria-label*="edit"i],
.calendar-list__item button[aria-label*="bearbeit"i],
.calendar-list__item .app-navigation-entry__utils button {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  padding: 2px !important;
}

.calendar-list__item button svg,
.calendar-list__item button img {
  width: 12px !important;
  height: 12px !important;
}

/* color-indicator (color-dot) left — kleiner */
.calendar-list__item__color,
.calendar-list__item .color-dot {
  width: 10px !important;
  height: 10px !important;
  flex-shrink: 0 !important;
}

/* hover-state: text vertikal zentriert */
.calendar-list__item:hover,
.calendar-list__item.active,
.app-navigation-entry.calendar-list__item.active {
  padding: 4px 10px !important;
  background: rgba(212, 165, 116, 0.12) !important;
  border-radius: 6px !important;
}

/* calendar-grid event-blocks — sage statt nc-grün */
.fc-event,
.fc-event-container .fc-event,
.fc-h-event,
.fc-daygrid-event,
[class*="event"][class*="--holiday"] {
  background-color: #6B8E7F !important;
  border-color: #6B8E7F !important;
  color: #EDEAE3 !important;
}

.fc-event:hover {
  background-color: #82a596 !important;
}

/* ── 27 · foto-icon topbar (external-site "Fotos")  ─────────────── */
/* external-app nutzt icon="external.svg" → beide sites (fotos+chat)
   haben gleiches icon. wir überschreiben via href-matcher: */

a.app-menu-entry[href*="photos.stackschmiede"] .app-menu-entry__icon,
.app-menu-entry[data-app*="external"] a[href*="photos"] + .app-menu-entry__icon,
a[href*="/apps/external/"][title*="Fotos" i] + .app-menu-entry__icon,
a.app-menu-entry[data-app="external_index0"] .app-menu-entry__icon,
.header__menu a[href*="photos"] img {
  -webkit-mask-image: url("/themes/cloudstack/core/img/icons/apps/photos.svg") !important;
  mask-image: url("/themes/cloudstack/core/img/icons/apps/photos.svg") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  background: currentColor !important;
}

/* fallback: falls das mask nicht greift, ersetze img src via content */
a[href*="photos.stackschmiede"] img[src*="external.svg"],
a[href*="photos.stackschmiede"] img[src*="external_links"] {
  content: url("/themes/cloudstack/core/img/icons/apps/photos.svg") !important;
}

/* ── 28 · collapse-buttons in nav (mail "Collapse folders", etc.)  ── */
/* Mail-App rendert am Ende der folder-list einen "Collapse folders"
   button — ohne icon, ohne einheitliches sizing. Hier konsistent machen. */

.app-navigation__list button.collapse-button,
.app-navigation__list button[class*="collapsible__button"],
.app-navigation__list button[class*="collapse-folders"],
.app-navigation__list .app-navigation-collapse,
.app-navigation__list button[aria-label*="Collapse"],
.app-navigation__list button[aria-label*="Aufklappen"],
.app-navigation__list button[aria-label*="Einklappen"],
.app-navigation__list [class*="mailbox"] + button,
.app-navigation__list > li > button:last-child {
  min-height: 30px !important;
  padding: 2px 12px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  color: #8A8680 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  text-align: left !important;
  font-family: 'Inter Variable', 'Inter', sans-serif !important;
  cursor: pointer !important;
}

.app-navigation__list button.collapse-button:hover,
.app-navigation__list button[class*="collapsible__button"]:hover,
.app-navigation__list button[class*="collapse-folders"]:hover,
.app-navigation__list button[aria-label*="Collapse"]:hover,
.app-navigation__list button[aria-label*="Aufklappen"]:hover,
.app-navigation__list button[aria-label*="Einklappen"]:hover {
  background: rgba(212, 165, 116, 0.10) !important;
  color: #D4A574 !important;
}

/* ── 29 · login-page: remember-me checkbox (NC 33 Vue-Komponente)  ──
   NC rendert KEINE klassische input+label-Checkbox, sondern:
   span.checkbox-radio-switch
     input.checkbox-radio-switch__input  ← NC versteckt via position:abs/opacity:0
     span.checkbox-content
       span.checkbox-content__icon.checkbox-radio-switch__icon  ← visuelle Box + Haken (SVG)
       [Text: "An mich erinnern"]
   Regel: natives input NICHT aufdecken — nur Vue-Spans stylen.       */

/* natives input versteckt lassen — NC-Standard nicht überschreiben */
body#body-login input[type="checkbox"].checkbox-radio-switch__input,
form#login-form input[type="checkbox"].checkbox-radio-switch__input,
.guest input[type="checkbox"].checkbox-radio-switch__input {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  margin: 0 !important;
}

/* Outer wrapper: flex-row mit gap für Box + Text */
body#body-login .checkbox-radio-switch.checkbox-radio-switch-checkbox,
form#login-form .checkbox-radio-switch.checkbox-radio-switch-checkbox,
.guest .checkbox-radio-switch.checkbox-radio-switch-checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #EDEAE3 !important;
  font-size: 14px !important;
  font-family: 'Inter Variable', 'Inter', sans-serif !important;
  font-weight: 500 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* visuelle Box — gemeinsame properties (beide states) */
body#body-login .checkbox-radio-switch.checkbox-radio-switch-checkbox .checkbox-radio-switch__icon,
form#login-form .checkbox-radio-switch.checkbox-radio-switch-checkbox .checkbox-radio-switch__icon,
.guest .checkbox-radio-switch.checkbox-radio-switch-checkbox .checkbox-radio-switch__icon {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  border-radius: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* unchecked: dunkler BG + grauer outer border 3px, kein Haken */
body#body-login .checkbox-radio-switch:not(.checkbox-radio-switch--checked) .checkbox-radio-switch__icon,
form#login-form .checkbox-radio-switch:not(.checkbox-radio-switch--checked) .checkbox-radio-switch__icon,
.guest .checkbox-radio-switch:not(.checkbox-radio-switch--checked) .checkbox-radio-switch__icon {
  background: #1A1A1F !important;
  border: 1.5px solid #8A8680 !important;
  color: transparent !important;
}

/* checked: amber fill, 3px amber outer border, dunkler Haken */
body#body-login .checkbox-radio-switch--checked .checkbox-radio-switch__icon,
form#login-form .checkbox-radio-switch--checked .checkbox-radio-switch__icon,
.guest .checkbox-radio-switch--checked .checkbox-radio-switch__icon {
  background: #D4A574 !important;
  border: 1.5px solid #D4A574 !important;
  color: #0F0F10 !important;
}

/* inner border entfernen — alle child-spans/-elemente im icon-span */
body#body-login .checkbox-radio-switch .checkbox-radio-switch__icon *,
form#login-form .checkbox-radio-switch .checkbox-radio-switch__icon *,
.guest .checkbox-radio-switch .checkbox-radio-switch__icon * {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* SVG-Icon: korrekte Größe */
body#body-login .checkbox-radio-switch.checkbox-radio-switch-checkbox .checkbox-radio-switch__icon svg,
form#login-form .checkbox-radio-switch.checkbox-radio-switch-checkbox .checkbox-radio-switch__icon svg,
.guest .checkbox-radio-switch.checkbox-radio-switch-checkbox .checkbox-radio-switch__icon svg {
  width: 13px !important;
  height: 13px !important;
  fill: currentColor !important;
}

/* content-row: icon + text vertikal zentriert, kein NC-hover-bg */
body#body-login .checkbox-radio-switch.checkbox-radio-switch-checkbox .checkbox-content,
form#login-form .checkbox-radio-switch.checkbox-radio-switch-checkbox .checkbox-content,
.guest .checkbox-radio-switch.checkbox-radio-switch-checkbox .checkbox-content {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1 !important;
  background: transparent !important;
  padding: 0 !important;
}

/* NC hover-target fläche entfernen — outer + content + wrapper */
body#body-login .checkbox-radio-switch.checkbox-radio-switch-checkbox::before,
body#body-login .checkbox-radio-switch.checkbox-radio-switch-checkbox::after,
body#body-login .checkbox-radio-switch.checkbox-radio-switch-checkbox .checkbox-content::before,
body#body-login .checkbox-radio-switch.checkbox-radio-switch-checkbox .checkbox-content::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* focus-ring über :focus-within auf dem outer span */
body#body-login .checkbox-radio-switch.checkbox-radio-switch-checkbox:focus-within,
form#login-form .checkbox-radio-switch.checkbox-radio-switch-checkbox:focus-within {
  outline: 2px solid #D4A574 !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* Wrapper-DIV der remember-me-zeile (falls NC zusätzlich einen div drumherum legt) */
.login-form__remember-login,
.guest-box__remember-login,
[class*="remember-login"],
[class*="remember-me"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 12px 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ── 30 · chat-icon topbar (external-site "Chat")  ───────────────── */
/* analog §27 foto-override: external-app setzt default external.svg
   für alle external-sites, wir mappen auf chat.svg via href/data-matcher.
   Chat läuft als iframe-embed (redirect=false) — external-app rendert
   iframe-container mit eigener icon-komponente.                       */

a.app-menu-entry[href*="chat.stackschmiede"] .app-menu-entry__icon,
.app-menu-entry[data-app*="external"] a[href*="chat"] + .app-menu-entry__icon,
a[href*="/apps/external/"][title*="Chat" i] + .app-menu-entry__icon,
a.app-menu-entry[data-site-id="chat"] .app-menu-entry__icon,
.header__menu a[href*="chat.stackschmiede"] img,
.app-menu-entry[data-site-name="Chat"] .app-menu-entry__icon {
  -webkit-mask-image: url("/themes/cloudstack/core/img/icons/apps/chat.svg") !important;
  mask-image: url("/themes/cloudstack/core/img/icons/apps/chat.svg") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  background: currentColor !important;
}

/* fallback: falls mask nicht greift, ersetze img src direkt */
a[href*="chat.stackschmiede"] img[src*="external.svg"],
a[href*="chat.stackschmiede"] img[src*="external_links"],
a[href*="/apps/external/"] img[alt*="Chat" i] {
  content: url("/themes/cloudstack/core/img/icons/apps/chat.svg") !important;
}

/* iframe-container für external-app (redirect=false) — full height
   innerhalb #app-content, keine borders, damit Element nahtlos sitzt. */
#app-content iframe[src*="chat.stackschmiede"],
#app-content-vue iframe[src*="chat.stackschmiede"],
.app-external iframe[src*="chat.stackschmiede"] {
  width: 100% !important;
  height: calc(100vh - 50px) !important;
  border: none !important;
  background: #0F0F10 !important;
  /* element voice/video calls brauchen diese permissions — external-app
     setzt sie per default nicht; falls video-calls nicht funktionieren:
     siehe WORKNOTES-REBRAND §Phase 4 → custom iframe-wrapper nötig.    */
}

/* ═══════════════════════════════════════════════════════════════════
   Known gaps / upgrade-notes (siehe WORKNOTES-REBRAND.md)
   — vue-shadow-dom: css-vars penetrate shadow-root nicht → fallback
     direkte overrides in section 14 (wo noch sichtbar).
   — nc-patch-updates: selektoren mit `.app-menu-entry[data-app="..."]`
     können bei major-version-änderung brechen. bei nc34-upgrade: alle
     selektoren gegen core/src/views + apps/*/src grep'en.
   — mask-image fallback: alte browser ignorieren mask → icon wird
     nicht sichtbar (bg bleibt currentColor-block). scope = desktop
     moderne browser, akzeptabel für self-hosted team-instanz.
   ═══════════════════════════════════════════════════════════════════ */