/* Brand sources are emitted for both modes; these aliases change instantly. */
body[data-client-branding],
.app-branding-preview {
  --app-brand-primary: var(--app-brand-primary-light);
  --app-brand-primary-rgb: var(--app-brand-primary-rgb-light);
  --app-brand-primary-hover: var(--app-brand-primary-hover-light);
  --app-brand-primary-hover-rgb: var(--app-brand-primary-hover-rgb-light);
  --app-brand-primary-active: var(--app-brand-primary-active-light);
  --app-brand-primary-subtle: var(--app-brand-primary-subtle-light);
  --app-brand-primary-border: var(--app-brand-primary-border-light);
  --app-brand-primary-text: var(--app-brand-primary-text-light);
  --app-brand-primary-foreground: var(--app-brand-primary-foreground-light);
  --app-brand-primary-foreground-rgb: var(--app-brand-primary-foreground-rgb-light);
  --app-brand-primary-foreground-hover: var(--app-brand-primary-foreground-hover-light);
  --app-brand-primary-foreground-hover-rgb: var(--app-brand-primary-foreground-hover-rgb-light);
  --app-brand-secondary: var(--app-brand-secondary-light);
  --app-brand-secondary-rgb: var(--app-brand-secondary-rgb-light);
  --app-brand-secondary-hover: var(--app-brand-secondary-hover-light);
  --app-brand-secondary-hover-rgb: var(--app-brand-secondary-hover-rgb-light);
  --app-brand-secondary-active: var(--app-brand-secondary-active-light);
  --app-brand-secondary-subtle: var(--app-brand-secondary-subtle-light);
  --app-brand-secondary-border: var(--app-brand-secondary-border-light);
  --app-brand-secondary-text: var(--app-brand-secondary-text-light);
  --app-brand-secondary-foreground: var(--app-brand-secondary-foreground-light);
  --app-brand-secondary-foreground-rgb: var(--app-brand-secondary-foreground-rgb-light);
  --app-brand-secondary-foreground-hover: var(--app-brand-secondary-foreground-hover-light);
  --app-brand-secondary-foreground-hover-rgb: var(--app-brand-secondary-foreground-hover-rgb-light);
}

html[data-bs-theme="dark"] body[data-client-branding],
html[data-bs-theme="dark"] .app-branding-preview {
  --app-brand-primary: var(--app-brand-primary-dark);
  --app-brand-primary-rgb: var(--app-brand-primary-rgb-dark);
  --app-brand-primary-hover: var(--app-brand-primary-hover-dark);
  --app-brand-primary-hover-rgb: var(--app-brand-primary-hover-rgb-dark);
  --app-brand-primary-active: var(--app-brand-primary-active-dark);
  --app-brand-primary-subtle: var(--app-brand-primary-subtle-dark);
  --app-brand-primary-border: var(--app-brand-primary-border-dark);
  --app-brand-primary-text: var(--app-brand-primary-text-dark);
  --app-brand-primary-foreground: var(--app-brand-primary-foreground-dark);
  --app-brand-primary-foreground-rgb: var(--app-brand-primary-foreground-rgb-dark);
  --app-brand-primary-foreground-hover: var(--app-brand-primary-foreground-hover-dark);
  --app-brand-primary-foreground-hover-rgb: var(--app-brand-primary-foreground-hover-rgb-dark);
  --app-brand-secondary: var(--app-brand-secondary-dark);
  --app-brand-secondary-rgb: var(--app-brand-secondary-rgb-dark);
  --app-brand-secondary-hover: var(--app-brand-secondary-hover-dark);
  --app-brand-secondary-hover-rgb: var(--app-brand-secondary-hover-rgb-dark);
  --app-brand-secondary-active: var(--app-brand-secondary-active-dark);
  --app-brand-secondary-subtle: var(--app-brand-secondary-subtle-dark);
  --app-brand-secondary-border: var(--app-brand-secondary-border-dark);
  --app-brand-secondary-text: var(--app-brand-secondary-text-dark);
  --app-brand-secondary-foreground: var(--app-brand-secondary-foreground-dark);
  --app-brand-secondary-foreground-rgb: var(--app-brand-secondary-foreground-rgb-dark);
  --app-brand-secondary-foreground-hover: var(--app-brand-secondary-foreground-hover-dark);
  --app-brand-secondary-foreground-hover-rgb: var(--app-brand-secondary-foreground-hover-rgb-dark);
  --bs-link-color: var(--app-brand-primary-foreground);
  --bs-link-color-rgb: var(--app-brand-primary-foreground-rgb);
  --bs-link-hover-color: var(--app-brand-primary-foreground-hover);
  --bs-link-hover-color-rgb: var(--app-brand-primary-foreground-hover-rgb);
}

/* A very dark customer color still needs a visible edge against dark panels. */
html[data-bs-theme="dark"] body[data-client-branding] .btn-primary {
  --bs-btn-border-color: var(--app-brand-primary-border);
  --bs-btn-hover-border-color: var(--app-brand-primary-foreground);
  --bs-btn-active-border-color: var(--app-brand-primary-foreground);
}
html[data-bs-theme="dark"] body[data-client-branding] .btn-secondary {
  --bs-btn-border-color: var(--app-brand-secondary-border);
  --bs-btn-hover-border-color: var(--app-brand-secondary-foreground);
  --bs-btn-active-border-color: var(--app-brand-secondary-foreground);
}
html[data-bs-theme="dark"] body[data-client-branding] :is(.btn-outline-primary, .btn-link) {
  --bs-btn-focus-shadow-rgb: var(--app-brand-primary-foreground-rgb);
}
html[data-bs-theme="dark"] body[data-client-branding] .btn-outline-secondary {
  --bs-btn-focus-shadow-rgb: var(--app-brand-secondary-foreground-rgb);
}
html[data-bs-theme="dark"] body[data-client-branding] .list-group-item-primary {
  --bs-list-group-action-hover-bg: var(--app-brand-primary-subtle);
  --bs-list-group-action-active-bg: var(--app-brand-primary-subtle);
}
html[data-bs-theme="dark"] body[data-client-branding] .list-group-item-secondary {
  --bs-list-group-action-hover-bg: var(--app-brand-secondary-subtle);
  --bs-list-group-action-active-bg: var(--app-brand-secondary-subtle);
}
.app-user-menu .app-appearance-options {
  min-width: 17rem;
}
body[data-client-branding] .app-appearance-options .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 2.75rem;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: var(--bs-tertiary-bg);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-active-color: var(--app-brand-primary-text);
  --bs-btn-active-bg: var(--app-brand-primary-subtle);
  --bs-btn-active-border-color: var(--app-brand-primary-border);
}
.app-appearance-options .btn:focus-visible {
  position: relative;
  z-index: 2;
}
.app-topbar [data-appearance-toggle][hidden],
html[data-appearance-mode="system"] .app-topbar [data-appearance-toggle] {
  display: none !important;
}

[data-personalization-open][hidden],
[data-personalization-control][hidden] {
  display: none !important;
}
.app-personal-color-swatch {
  display: inline-block;
  flex: 0 0 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--app-personal-swatch, var(--app-brand-primary, #0d6efd));
  border: 1px solid var(--bs-border-color-translucent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
/* Only the navbar shortcut shimmers; preference and preset swatches stay true
   to their colors. The saved color remains underneath the fading layers. */
#appPersonalColorButton > .app-personal-color-swatch {
  position: relative;
  isolation: isolate;
}
#appPersonalColorButton > .app-personal-color-swatch::before,
#appPersonalColorButton > .app-personal-color-swatch::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(#0d6efd, #6f42c1, #d63384, #fd7e14, #008080, #0d6efd);
  animation: app-color-dot-orbit 10s linear infinite,
             app-color-dot-fade 5s ease-in-out infinite;
}
#appPersonalColorButton > .app-personal-color-swatch::before {
  inset: 0;
  filter: blur(.2rem);
}
@keyframes app-color-dot-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes app-color-dot-fade {
  0%, 100% { opacity: .25; }
  50% { opacity: .85; }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  #appPersonalColorButton > .app-personal-color-swatch::before,
  #appPersonalColorButton > .app-personal-color-swatch::after {
    animation: none;
    display: none;
  }
}
.app-personal-color-preset {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body[data-client-branding] .app-personal-color-preset:is(.active, :active) {
  background-color: transparent;
  border-color: var(--app-personal-swatch);
  color: var(--bs-body-color);
  outline: 2px solid var(--app-personal-swatch);
  outline-offset: 1px;
  box-shadow: 0 0 .45rem var(--app-personal-swatch);
  box-shadow: 0 0 .65rem color-mix(in srgb, var(--app-personal-swatch) 35%, transparent);
}
body[data-client-branding] .app-personal-color-preset:focus-visible {
  outline: 2px solid var(--app-personal-swatch);
  outline-offset: 4px;
}

/* Extra appearance controls wrap by their intrinsic touch-target widths. */
@media (max-width: 767.98px) {
  html[data-personalization-enabled="true"] .app-topbar .app-topbar-inner {
    display: flex;
    flex-wrap: wrap;
  }
  html[data-personalization-enabled="true"] .app-topbar .app-topbar-actions {
    margin-inline-start: auto;
  }
}

/* Seven 44px dashboard controls cannot share a 320px row. Keep the utility
   targets intact and give the office picker its own row only when necessary. */
@media (max-width: 359.98px) {
  html:not([data-personalization-enabled="true"]):not([data-appearance-mode="system"]) .app-topbar-dashboard-utilities .app-topbar-inner {
    grid-template-areas: "start actions" "office office";
  }
  html:not([data-personalization-enabled="true"]):not([data-appearance-mode="system"]) .app-topbar-dashboard-utilities .app-topbar-start {
    display: contents !important;
  }
  html:not([data-personalization-enabled="true"]):not([data-appearance-mode="system"]) .app-topbar-dashboard-utilities .app-topbar-launch-controls {
    grid-area: start;
  }
  html:not([data-personalization-enabled="true"]):not([data-appearance-mode="system"]) .app-topbar-dashboard-utilities .dashboard-device-toolbar {
    grid-area: office;
    justify-self: stretch;
  }
  html:not([data-personalization-enabled="true"]):not([data-appearance-mode="system"]) .app-topbar-dashboard-utilities :is(.dashboard-device-picker, [data-dashboard-device-selector]) {
    width: 100%;
  }
  html:not([data-personalization-enabled="true"]):not([data-appearance-mode="system"]) .app-topbar-dashboard-utilities .dashboard-device-toolbar .app-topbar-icon-button {
    width: 100%;
    justify-content: flex-start;
    padding-inline: .75rem;
    gap: .5rem;
  }
  html:not([data-personalization-enabled="true"]):not([data-appearance-mode="system"]) .app-topbar-dashboard-utilities .dashboard-device-caption {
    display: inline-block !important;
    max-width: calc(100vw - 7rem);
  }
}