/* ==================================================
   Bess Controls
   Single authority for button/link/nav/toggle/badge/chip selectors.
   No raw colors here — all values from bess-tokens.css.
   ================================================== */

/* --------------------------------------------------
   BASE: App standard button (md)
   -------------------------------------------------- */
.bess-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-size-md-gap);
  min-height: var(--control-size-md-height);
  padding: var(--control-size-md-py) var(--control-size-md-px);
  border-radius: var(--control-size-md-radius);
  border: 1px solid transparent;
  font-family: var(--font-control);
  font-size: var(--control-size-md-font);
  font-weight: var(--control-font-weight);
  line-height: var(--line-height-control);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: var(--control-transition);
}

/* --------------------------------------------------
   LANDING CTA button (lg) — scoped to landing body
   -------------------------------------------------- */
body.bess-public-landing-page .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--control-size-lg-gap);
  padding: var(--control-size-lg-py) var(--control-size-lg-px);
  border-radius: var(--control-size-lg-radius);
  border: 1px solid transparent;
  font-family: var(--font-control);
  font-size: var(--control-size-lg-font);
  font-weight: var(--control-font-weight-strong);
  line-height: var(--line-height-control);
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: var(--control-transition);
}

body.bess-public-landing-page .btn:active {
  transform: scale(0.98);
}

/* --------------------------------------------------
   HEADER ACTION (sm) — scoped to landing
   -------------------------------------------------- */
body.bess-public-landing-page .site-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-size-sm-gap);
  min-height: var(--control-size-sm-height);
  padding-inline: var(--control-size-sm-px);
  border-radius: var(--control-size-sm-radius);
  border: 1px solid transparent;
  font-family: var(--font-control);
  font-size: var(--control-size-sm-font);
  font-weight: var(--control-font-weight-strong);
  line-height: var(--line-height-control);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: var(--control-transition);
}

@media (max-width: 767px) {
  body.bess-public-landing-page .site-action {
    min-height: var(--control-size-sm-mobile-height);
    padding-inline: var(--control-size-sm-mobile-px);
    gap: var(--control-size-sm-mobile-gap);
    font-size: var(--control-size-sm-mobile-font);
  }
}

/* --------------------------------------------------
   ICON BUTTON — landing icon controls
   -------------------------------------------------- */
body.bess-public-landing-page .site-menu-toggle,
body.bess-public-landing-page .mobile-menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-size-icon);
  height: var(--control-size-icon);
  min-width: var(--control-size-icon);
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--icon-button-border);
  background: var(--icon-button-bg);
  color: var(--icon-button-text);
  cursor: pointer;
  transition: var(--control-transition);
}

body.bess-public-landing-page .mobile-menu-close {
  width: var(--control-size-icon-sm);
  height: var(--control-size-icon-sm);
  min-width: var(--control-size-icon-sm);
}

body.bess-public-landing-page .site-menu-toggle:hover,
body.bess-public-landing-page .mobile-menu-close:hover {
  background: var(--icon-button-hover-bg);
  border-color: var(--icon-button-hover-border);
}

/* App icon button: header icon actions */
.bess-landing-header-icon-btn,
.bess-print-pdf-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-size-icon);
  min-width: var(--control-size-icon);
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--icon-button-border);
  background: var(--icon-button-bg);
  color: var(--icon-button-text);
  cursor: pointer;
  transition: var(--control-transition);
}

.bess-landing-header-icon-btn:hover,
.bess-print-pdf-trigger:hover {
  background: var(--icon-button-hover-bg);
  border-color: var(--icon-button-hover-border);
}

/* --------------------------------------------------
   HUB LINK (micro) — accent text nav link
   -------------------------------------------------- */
.bess-app-hub-link {
  display: inline-flex;
  align-items: center;
  gap: var(--control-size-micro-gap);
  padding: var(--control-size-micro-py) var(--control-size-micro-px);
  border-radius: var(--control-size-micro-radius);
  font-family: var(--font-control);
  font-size: var(--control-size-micro-font);
  font-weight: var(--control-font-weight);
  line-height: var(--line-height-control);
  color: var(--link-text);
  text-decoration: none;
  cursor: pointer;
  transition: var(--control-transition);
}

.bess-app-hub-link:hover {
  background: var(--bg-page);
  color: var(--link-hover-text);
}

/* --------------------------------------------------
   COMPACT ACTION — position-actions primary CTA
   Note: .bess-nav-card__btn retains PRIMARY role (accent)
   per current UI design. Spec suggests secondary, but
   this button is the main CTA on position cards.
   -------------------------------------------------- */
.bess-nav-card--position-actions .bess-nav-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-size-compact-gap);
  padding: var(--control-size-compact-py) var(--control-size-compact-px);
  border-radius: var(--control-size-nav-row-radius);
  border: 1px solid transparent;
  font-family: var(--font-control);
  font-size: var(--control-size-compact-font);
  font-weight: var(--control-font-weight);
  line-height: var(--line-height-control);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: var(--control-transition);
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  box-shadow: var(--button-primary-shadow);
}

.bess-nav-card--position-actions .bess-nav-card__btn:hover {
  background: var(--color-accent-hover) !important;
  color: var(--button-primary-text);
}

.bess-nav-card--position-actions .bess-nav-card__btn:active {
  background: var(--button-primary-active-bg);
}

/* Ghost variant of compact: accent-tinted outline */
.bess-nav-card--position-actions .bess-nav-card__btn--ghost {
  background: var(--bg-surface);
  color: var(--link-text);
  border-color: var(--button-secondary-border);
  box-shadow: var(--shadow-sm);
}

.bess-nav-card--position-actions .bess-nav-card__btn--ghost:hover {
  background: var(--button-secondary-hover-bg) !important;
  color: var(--link-text);
  box-shadow: var(--shadow-md);
}

/* Compact context override: reset PDF trigger to match ghost btn height */
.bess-nav-card--position-actions .bess-nav-card__btn.bess-print-pdf-trigger,
.bess-nav-card--position-actions .bess-print-pdf-trigger.bess-nav-card__btn {
  min-height: unset;
  height: auto;
  padding: var(--control-size-compact-py) var(--control-size-compact-px);
  font-size: var(--control-size-compact-font);
}

/* Tool action: compact secondary */
.bess-tool-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-size-compact-gap);
  padding: var(--control-size-compact-py) var(--control-size-compact-px);
  border-radius: var(--control-size-compact-radius);
  border: 1px solid var(--button-secondary-border);
  font-family: var(--font-control);
  font-size: var(--control-size-compact-font);
  font-weight: var(--control-font-weight);
  line-height: var(--line-height-control);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: var(--control-transition);
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}

.bess-tool-action-btn:hover {
  background: var(--button-secondary-hover-bg);
  border-color: var(--button-secondary-hover-border);
  color: var(--button-secondary-text);
}

/* --------------------------------------------------
   SIDEBAR NAV ROW (nav-row size)
   -------------------------------------------------- */
#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row,
#bess-sidebar-left .nav-item.nav-row {
  min-height: var(--control-size-nav-row-height);
  font-family: var(--font-control);
  font-size: var(--control-size-nav-row-font);
  line-height: var(--line-height-control);
  cursor: pointer;
  transition: var(--control-transition);
}

/* --------------------------------------------------
   LARGE / XL size modifier
   -------------------------------------------------- */
.bess-btn--lg,
.btn-primary--lg,
.btn-secondary--lg,
.btn-ghost--lg,
.pricing-card-cta .btn {
  min-height: var(--control-size-xl-height);
  padding: var(--control-size-xl-py) var(--control-size-xl-px);
  gap: var(--control-size-xl-gap);
  border-radius: var(--control-size-xl-radius);
  font-size: var(--control-size-xl-font);
  font-weight: var(--control-font-weight-strong);
}

/* --------------------------------------------------
   PRIMARY ROLE
   -------------------------------------------------- */
.bess-btn--primary,
.bess-training-btn--primary,
body.bess-public-landing-page .btn-primary,
body.bess-public-landing-page .site-action.primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  border-color: var(--button-primary-border);
  box-shadow: var(--button-primary-shadow);
}

.bess-btn--primary:hover,
.bess-training-btn--primary:hover,
body.bess-public-landing-page .btn-primary:hover,
body.bess-public-landing-page .site-action.primary:hover {
  background: var(--button-primary-hover-bg);
  color: var(--button-primary-text);
  transform: translateY(-1px);
}

.bess-btn--primary:active,
.bess-training-btn--primary:active,
body.bess-public-landing-page .btn-primary:active,
body.bess-public-landing-page .site-action.primary:active {
  background: var(--button-primary-active-bg);
  transform: translateY(0);
}

/* Tutor LMS primary */
.tutor-btn-primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  border-color: var(--button-primary-border);
}

.tutor-btn-primary:hover {
  background: var(--button-primary-hover-bg);
  color: var(--button-primary-text);
}

/* --------------------------------------------------
   SECONDARY ROLE
   -------------------------------------------------- */
.bess-btn--secondary,
.bess-training-btn--ghost,
.tutor-btn-outline-primary,
.tutor-btn-secondary,
body.bess-public-landing-page .btn-secondary,
body.bess-public-landing-page .site-action.secondary {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  border-color: var(--button-secondary-border);
  box-shadow: none;
}

.bess-btn--secondary:hover,
.bess-training-btn--ghost:hover,
.tutor-btn-outline-primary:hover,
.tutor-btn-secondary:hover,
body.bess-public-landing-page .btn-secondary:hover,
body.bess-public-landing-page .site-action.secondary:hover {
  background: var(--button-secondary-hover-bg);
  color: var(--button-secondary-text);
  border-color: var(--button-secondary-hover-border);
}

.bess-btn--secondary:active,
body.bess-public-landing-page .btn-secondary:active,
body.bess-public-landing-page .site-action.secondary:active {
  background: var(--button-secondary-active-bg);
}

/* --------------------------------------------------
   GHOST ROLE — true ghost
   -------------------------------------------------- */
.bess-btn--ghost,
body.bess-public-landing-page .btn-ghost {
  background: var(--button-ghost-bg);
  color: var(--button-ghost-text);
  border-color: var(--button-ghost-border);
  box-shadow: none;
}

.bess-btn--ghost:hover,
body.bess-public-landing-page .btn-ghost:hover {
  background: var(--button-ghost-hover-bg);
  color: var(--button-ghost-text);
  border-color: var(--button-ghost-border);
}

.bess-btn--ghost:active,
body.bess-public-landing-page .btn-ghost:active {
  background: var(--button-ghost-active-bg);
}

/* --------------------------------------------------
   TEXT LINK
   -------------------------------------------------- */
.bess-text-link,
.footer-col a {
  color: var(--link-text);
  text-decoration: none;
  cursor: pointer;
  transition:
    color var(--duration-base) var(--ease-standard),
    text-decoration-color var(--duration-base) var(--ease-standard),
    background var(--duration-base) var(--ease-standard);
}

.bess-text-link:hover,
.footer-col a:hover {
  color: var(--link-hover-text);
  text-decoration: underline;
  text-decoration-color: var(--link-hover-decoration);
}

/* --------------------------------------------------
   NAV / MENU ITEM — light background
   -------------------------------------------------- */
body.bess-public-landing-page .site-nav a,
body.bess-public-landing-page .mobile-menu-nav a,
.ui-nav-item {
  color: var(--nav-item-text);
  text-decoration: none;
  cursor: pointer;
  transition: var(--control-transition);
}

body.bess-public-landing-page .site-nav a:hover,
body.bess-public-landing-page .mobile-menu-nav a:hover,
.ui-nav-item:hover {
  background: var(--nav-item-hover-bg);
  color: var(--nav-item-hover-text);
}

body.bess-public-landing-page .site-nav a.active,
body.bess-public-landing-page .mobile-menu-nav a.active,
.ui-nav-item.active {
  background: var(--nav-item-hover-bg);
  color: var(--nav-item-hover-text);
}

/* Landing mobile login button — dark variant */
body.bess-public-landing-page .mobile-menu-login {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}

body.bess-public-landing-page .mobile-menu-login:hover {
  background: var(--color-dark);
  color: var(--color-white);
}

/* --------------------------------------------------
   NAV ITEM — dark sidebar
   -------------------------------------------------- */
#bess-sidebar-left .nav-item {
  color: var(--nav-dark-item-text);
  cursor: pointer;
  transition: var(--control-transition);
}

#bess-app-sidebar #bess-sidebar-left .nav-item.nav-row:not(.active):hover,
#bess-app-sidebar-drawer #bess-sidebar-left .nav-item.nav-row:not(.active):hover,
#bess-sidebar-left .nav-item:not(.active):hover {
  background: var(--nav-dark-item-hover-bg);
  color: var(--nav-dark-item-hover-text);
}

#bess-sidebar-left .nav-item.active {
  background: var(--nav-dark-item-active-bg);
  color: var(--nav-dark-item-active-text) !important;
}

#bess-sidebar-left .nav-item.active:hover {
  background: var(--nav-dark-item-active-bg);
  color: var(--nav-dark-item-active-text);
  cursor: default;
  pointer-events: none;
}

#bess-sidebar-left .nav-item.active .material-symbols-outlined,
#bess-sidebar-left .nav-item.active .nav-ms-icon {
  color: var(--nav-dark-item-active-text);
}

#bess-sidebar-left .nav-item[aria-disabled="true"],
#bess-sidebar-left .nav-item.is-disabled {
  color: var(--nav-dark-item-disabled-text);
  cursor: var(--control-disabled-cursor);
}

/* --------------------------------------------------
   TOGGLE / DISCLOSURE
   -------------------------------------------------- */
.faq-q,
.org-nav-branch-summary {
  cursor: pointer;
  transition: var(--control-transition);
}

.faq-q:hover,
.org-nav-branch-summary:hover {
  background: var(--toggle-hover-bg);
}

.faq-q[aria-expanded="true"],
.org-nav-branch-summary[aria-expanded="true"] {
  background: var(--toggle-open-bg);
  color: var(--toggle-open-text);
  border-color: var(--toggle-open-border);
}

/* --------------------------------------------------
   BADGE — non-interactive (no hover/cursor affordance)
   -------------------------------------------------- */
.badge-item,
.bess-card-header__badge,
.org-branch-count-badge {
  cursor: default;
  transition: none;
  box-shadow: none;
  pointer-events: none;
}

/* --------------------------------------------------
   CLICKABLE CHIP / FILTER CHIP
   -------------------------------------------------- */
.bess-chip--clickable {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-size-compact-gap);
  min-height: var(--control-size-nav-row-height);
  padding: 0 var(--control-size-compact-px);
  border-radius: var(--radius-full);
  background: var(--chip-bg);
  color: var(--chip-text);
  border: 1px solid var(--chip-border);
  cursor: pointer;
  transition: var(--control-transition);
}

.bess-chip--clickable:hover {
  background: var(--chip-hover-bg);
  border-color: var(--chip-hover-border);
}

.bess-chip--clickable.is-selected,
.bess-chip--clickable[aria-selected="true"] {
  background: var(--chip-selected-bg);
  color: var(--chip-selected-text);
  border-color: var(--chip-selected-border);
}

/* --------------------------------------------------
   DISABLED STATE
   -------------------------------------------------- */
.bess-btn[disabled],
.bess-btn[aria-disabled="true"],
body.bess-public-landing-page .btn[disabled],
body.bess-public-landing-page .btn[aria-disabled="true"],
.bess-training-btn[disabled],
.bess-training-btn[aria-disabled="true"] {
  opacity: var(--control-disabled-opacity);
  cursor: var(--control-disabled-cursor);
  pointer-events: none;
}

/* --------------------------------------------------
   APP HEADER BUTTON (.bess-hdr-btn)
   -------------------------------------------------- */
.bess-hdr-btn {
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-light-primary);
  font-size: 13px;
  font-weight: 500;
  transition: var(--control-transition);
}

.bess-hdr-btn:hover {
  background: var(--bg-page);
  border-color: var(--border-button-light);
}

/* Dropdown menu items */
.bess-hdr-dropdown__item {
  color: var(--text-light-primary);
  transition: background var(--duration-fast) var(--ease-standard);
}

.bess-hdr-dropdown__item:hover {
  background: var(--bg-page);
}

.bess-hdr-dropdown__item--logout,
.bess-hdr-dropdown__item--logout:hover {
  color: var(--text-light-primary);
}

.bess-hdr-dropdown__item--logout:hover {
  background: var(--bg-page);
}

/* Theme toggle button */
.bess-hdr-theme-btn {
  color: var(--text-light-secondary);
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.bess-hdr-theme-btn:hover,
.bess-hdr-theme-btn[aria-pressed="true"],
.bess-hdr-theme-btn.is-active {
  background: var(--bg-surface);
  color: var(--text-light-accent);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------
   FOCUS RING — universal
   -------------------------------------------------- */
.bess-btn:focus-visible,
body.bess-public-landing-page .btn:focus-visible,
body.bess-public-landing-page .site-action:focus-visible,
body.bess-public-landing-page .site-menu-toggle:focus-visible,
body.bess-public-landing-page .mobile-menu-close:focus-visible,
body.bess-public-landing-page .site-nav a:focus-visible,
body.bess-public-landing-page .mobile-menu-nav a:focus-visible,
body.bess-public-landing-page .faq-q:focus-visible,
.bess-landing-header-icon-btn:focus-visible,
.bess-print-pdf-trigger:focus-visible,
.bess-app-hub-link:focus-visible,
.bess-tool-action-btn:focus-visible,
.bess-text-link:focus-visible,
.footer-col a:focus-visible,
.ui-nav-item:focus-visible,
.faq-q:focus-visible,
.org-nav-branch-summary:focus-visible,
.bess-chip--clickable:focus-visible,
.tutor-btn-primary:focus-visible,
.tutor-btn-outline-primary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* --------------------------------------------------
   PRIVATE GATE BUTTON (.bess-private-gate__btn)
   -------------------------------------------------- */
.bess-private-gate__btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-accent);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.bess-private-gate__btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
}
.bess-private-gate__btn--primary {
  background: var(--color-accent);
  color: var(--color-dark);
}
.bess-private-gate__btn--primary:hover { background: var(--color-accent-hover); }
.bess-private-gate__btn--primary:active { background: var(--color-accent-active); }
.bess-private-gate__btn--secondary {
  background: var(--bg-surface);
  color: var(--color-dark);
  border: 1px solid var(--border-button-light);
}
html.dark .bess-private-gate__btn--secondary {
  background: var(--bg-dark-surface);
  color: var(--text-dark-primary);
  border-color: var(--border-dark);
}
.bess-private-gate__btn .material-symbols-outlined { font-size: 20px; line-height: 1; }
.bess-private-gate__btn .bess-social-login-btn__label { display: inline-flex; align-items: center; }
@media (max-width: 480px) {
  .bess-private-gate__btn { width: 100%; max-width: 280px; }
}

/* --------------------------------------------------
   PDF PRINT TRIGGER (.bess-print-pdf-trigger.btn)
   !important required: bess-controls.css loads before dist/main.css in the
   enqueue chain, so .btn base rules from the Tailwind output would win the
   cascade for background/color/border without !important.
   -------------------------------------------------- */
.btn.bess-print-pdf-trigger,
.bess-print-pdf-trigger.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  border: 0.5px solid transparent !important;
  box-sizing: border-box;
  background: var(--color-accent) !important;
  color: var(--color-dark) !important;
  box-shadow: var(--shadow-accent);
  transition:
    background var(--duration-base) var(--ease-standard),
    box-shadow 300ms var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
.btn.bess-print-pdf-trigger:hover,
.bess-print-pdf-trigger.btn:hover {
  background: var(--color-accent-hover) !important;
  color: var(--color-dark) !important;
  box-shadow: var(--shadow-accent), var(--shadow-control-float-sm);
}
.btn.bess-print-pdf-trigger .material-symbols-outlined,
.bess-print-pdf-trigger.btn .material-symbols-outlined {
  color: var(--color-dark) !important;
  font-size: 18px;
  line-height: 1;
}
html.dark .btn.bess-print-pdf-trigger,
html.dark .bess-print-pdf-trigger.btn {
  background: var(--color-accent) !important;
  color: var(--color-dark) !important;
  border-color: transparent !important;
}
html.dark .btn.bess-print-pdf-trigger:hover,
html.dark .bess-print-pdf-trigger.btn:hover {
  background: var(--color-accent-hover) !important;
  color: var(--color-dark) !important;
}
html.dark .btn.bess-print-pdf-trigger .material-symbols-outlined,
html.dark .bess-print-pdf-trigger.btn .material-symbols-outlined {
  color: var(--color-dark) !important;
}
.bess-print-pdf-trigger[disabled],
.bess-print-pdf-trigger[aria-disabled="true"] {
  pointer-events: none;
  opacity: var(--control-disabled-opacity);
  cursor: var(--control-disabled-cursor);
}

/* --------------------------------------------------
   PDF PRINT TRIGGER — docked sidebar state
   Applied only when sidebar is visible (min-width: 1101px).
   !important retained: bess-controls.css loads before dist/main.css and
   .btn base rules still exist in generated app CSS.
   -------------------------------------------------- */
@media (min-width: 1101px) {
  body.bess-app-active #bess-sidebar-right .bess-header-card__pdf-row--docked .bess-print-pdf-trigger {
    background: var(--color-accent) !important;
    color: var(--color-dark) !important;
    border: 0.5px solid transparent !important;
    box-shadow: var(--shadow-accent), var(--shadow-control-float-sm);
    font-size: 12px;
    font-weight: 600;
  }
  body.bess-app-active #bess-sidebar-right .bess-header-card__pdf-row--docked .bess-print-pdf-trigger:hover {
    background: var(--color-accent-hover) !important;
    color: var(--color-dark) !important;
    box-shadow: var(--shadow-accent), var(--shadow-control-float-md);
  }
  body.bess-app-active #bess-sidebar-right .bess-header-card__pdf-row--docked .bess-print-pdf-trigger .material-symbols-outlined {
    color: var(--color-dark) !important;
    flex-shrink: 0;
    font-size: 17px;
    width: 18px;
    height: 18px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }
}
html.dark body.bess-app-active #bess-sidebar-right .bess-header-card__pdf-row--docked .bess-print-pdf-trigger {
  background: var(--color-accent) !important;
  color: var(--color-dark) !important;
}
html.dark body.bess-app-active #bess-sidebar-right .bess-header-card__pdf-row--docked .bess-print-pdf-trigger:hover {
  background: var(--color-accent-hover) !important;
  color: var(--color-dark) !important;
}
html.dark body.bess-app-active #bess-sidebar-right .bess-header-card__pdf-row--docked .bess-print-pdf-trigger .material-symbols-outlined {
  color: var(--color-dark) !important;
}