/**
 * Pytheos UI kit — buttons (py-btn)
 * Canonical button system (formerly as-btn on action-sheet).
 */

.py-btn,
button.py-btn,
a.py-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--py-space-2);
  margin: 0;
  padding: 5px 10px;
  font-family: var(--py-font);
  font-size: var(--py-font-size);
  font-weight: 500;
  line-height: var(--py-line-height);
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  box-sizing: border-box;
  border: 1px solid var(--py-neutral-border);
  border-radius: var(--py-control-radius);
  background: var(--py-neutral-soft);
  color: var(--py-neutral-text);
  box-shadow: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.py-btn:hover,
.py-btn:focus {
  text-decoration: none;
  outline: none;
}

.py-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--py-focus-ring);
}

.py-btn:disabled,
.py-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Sizes */
.py-btn--icon {
  width: var(--py-icon-btn-size);
  height: var(--py-icon-btn-size);
  min-width: var(--py-icon-btn-size);
  min-height: var(--py-icon-btn-size);
  padding: 0;
  gap: 0;
}

.py-btn--sm {
  padding: 4px 10px;
  font-size: var(--py-font-size-sm);
  min-height: 28px;
}

.py-btn--xs {
  padding: 2px 8px;
  font-size: var(--py-font-size-xs);
  min-height: 24px;
}

.py-btn--pill {
  border-radius: 999px;
}

.py-btn .caret {
  margin-left: 2px;
  border-top-color: currentColor;
}

/*
 * FA7 : font-weight: var(--fa-style). Le font-weight du .py-btn (500) peut
 * gagner selon la spécificité locale — forcer le style FA, sans toucher à la family.
 */
.py-btn .fas,
.py-btn .fa-solid,
.py-btn .fa {
  --fa-style: 900;
  font-weight: 900 !important;
  line-height: 1;
}
.py-btn .far,
.py-btn .fa-regular {
  --fa-style: 400;
  font-weight: 400 !important;
  line-height: 1;
}
.py-btn .fal,
.py-btn .fa-light {
  --fa-style: 300;
  font-weight: 300 !important;
  line-height: 1;
}
.py-btn .fat,
.py-btn .fa-thin {
  --fa-style: 100;
  font-weight: 100 !important;
  line-height: 1;
}

/* Group (spaced, separate buttons) */
.py-btn-group {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--py-space-2);
  vertical-align: middle;
}

/**
 * Split button — main action + caret glued (action-sheet-split)
 * Outer shell owns the radius; children stay square so the junction is flush.
 */
.py-btn-split {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  vertical-align: middle;
  flex-shrink: 0;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--py-neutral-border);
  border-radius: var(--py-control-radius);
  background: #fff;
  overflow: visible;
  box-sizing: border-box;
}

.py-btn-split > .py-btn {
  border: none !important;
  border-radius: 0 !important;
  margin: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit;
}

.py-btn-split > .py-btn:first-of-type {
  border-top-left-radius: calc(var(--py-control-radius) - 1px) !important;
  border-bottom-left-radius: calc(var(--py-control-radius) - 1px) !important;
}

.py-btn-split > .py-btn[data-py-dropdown-toggle],
.py-btn-split > .py-btn:nth-of-type(2) {
  border-top-right-radius: calc(var(--py-control-radius) - 1px) !important;
  border-bottom-right-radius: calc(var(--py-control-radius) - 1px) !important;
  border-left: 1px solid var(--py-neutral-border) !important;
  padding-left: 7px;
  padding-right: 7px;
  min-width: 28px;
}

.py-btn-split > .py-btn:hover,
.py-btn-split > .py-btn:focus {
  background: #f1f5f9 !important;
  outline: none;
}

.py-btn-split.is-open,
.py-btn-split:has(.is-open),
.py-btn-split.open,
.py-btn-split:has(.open) {
  background: #f1f5f9;
  border-color: rgba(100, 116, 139, 0.45);
}

.py-btn-split.is-open > .py-btn[data-py-dropdown-toggle],
.py-btn-split:has(.is-open) > .py-btn[data-py-dropdown-toggle],
.py-btn-split.open > .py-btn[data-py-dropdown-toggle] {
  border-left-color: rgba(100, 116, 139, 0.45) !important;
}

/* Soft / colored shell variants */
.py-btn-split--soft {
  background: var(--py-primary-soft);
  border-color: var(--py-primary-border);
  color: var(--py-primary);
}

.py-btn-split--soft > .py-btn[data-py-dropdown-toggle],
.py-btn-split--soft > .py-btn:nth-of-type(2) {
  border-left-color: var(--py-primary-border) !important;
}

.py-btn-split--soft > .py-btn:hover,
.py-btn-split--soft > .py-btn:focus,
.py-btn-split--soft.is-open {
  background: var(--py-primary-soft-strong) !important;
}

.py-btn-split--soft.is-open,
.py-btn-split--soft:has(.is-open) {
  border-color: var(--py-primary);
}

/**
 * Toolbar filter chip — Selectize shell (select.py-filter-select)
 * Matches list-toolbar multiselect chip look, without Bootstrap.
 */
.py-filter.selectize-control,
.selectize-control.py-filter {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  width: auto !important;
  min-width: 7.5rem;
  max-width: 14rem;
  height: 32px;
  margin: 0;
  /* Never paint the wrapper — global .filteron would show a square yellow behind the chip */
  background: transparent !important;
  background-color: transparent !important;
}

.py-filter.selectize-control.single .selectize-input,
.selectize-control.py-filter.single .selectize-input {
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px !important;
  height: 32px !important;
  max-height: 32px !important;
  padding: 0 28px 0 12px !important;
  margin: 0;
  font-family: var(--py-font);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  color: #334155;
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: var(--py-control-radius) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset !important;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.py-filter.selectize-control.single .selectize-input:after,
.selectize-control.py-filter.single .selectize-input:after {
  right: 12px;
  margin-top: -2px;
  border-width: 4px 4px 0 4px;
  border-color: #64748b transparent transparent transparent;
}

.py-filter.selectize-control.single .selectize-input.dropdown-active:after,
.selectize-control.py-filter.single .selectize-input.dropdown-active:after {
  margin-top: -3px;
  border-width: 0 4px 4px 4px;
  border-color: transparent transparent #64748b transparent;
}

.py-filter.selectize-control.single .selectize-input > * ,
.selectize-control.py-filter.single .selectize-input > * {
  vertical-align: middle;
}

.py-filter.selectize-control.single .selectize-input > input,
.selectize-control.py-filter.single .selectize-input > input {
  font-size: 12.5px !important;
  height: 18px !important;
  line-height: 18px !important;
  color: #334155 !important;
}

.py-filter.selectize-control.single .selectize-input .item,
.selectize-control.py-filter.single .selectize-input .item {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.py-filter.selectize-control.single .selectize-input:hover,
.selectize-control.py-filter.single .selectize-input:hover {
  background: #f8fafc !important;
  border-color: rgba(15, 23, 42, 0.18) !important;
  color: #0f172a;
}

.py-filter.selectize-control.single .selectize-input.focus,
.py-filter.selectize-control.single .selectize-input.dropdown-active,
.selectize-control.py-filter.single .selectize-input.focus,
.selectize-control.py-filter.single .selectize-input.dropdown-active {
  background: #f1f5f9 !important;
  border-color: rgba(66, 151, 221, 0.45) !important;
  box-shadow: 0 0 0 2px rgba(66, 151, 221, 0.12) !important;
}

.py-filter.selectize-control .selectize-input.filteron,
.selectize-control.py-filter .selectize-input.filteron,
.py-filter.selectize-control.single .selectize-input.filteron,
.selectize-control.py-filter.single .selectize-input.filteron {
  background: var(--highlight-soft-color, #fff3cd) !important;
  background-color: var(--highlight-soft-color, #fff3cd) !important;
  border-color: rgba(15, 23, 42, 0.15) !important;
  color: #222 !important;
  font-weight: 700;
  box-shadow: none !important;
}

.py-filter.selectize-control .selectize-input.filteron:hover,
.py-filter.selectize-control .selectize-input.filteron.focus,
.py-filter.selectize-control .selectize-input.filteron.dropdown-active,
.selectize-control.py-filter .selectize-input.filteron:hover,
.selectize-control.py-filter .selectize-input.filteron.focus,
.selectize-control.py-filter .selectize-input.filteron.dropdown-active {
  background: var(--highlight-soft-color, #fff3cd) !important;
  background-color: var(--highlight-soft-color, #fff3cd) !important;
  border-color: rgba(15, 23, 42, 0.2) !important;
  box-shadow: none !important;
  color: #222 !important;
}

/* Dropdown may be portaled to <body> (dropdownParent) — style both cases */
.py-filter.selectize-control .selectize-dropdown,
.selectize-control.py-filter .selectize-dropdown,
.selectize-dropdown.py-filter-dropdown {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: var(--py-control-radius);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  font-size: 12.5px;
  z-index: 1060;
}

.py-filter.selectize-control .selectize-dropdown .option,
.selectize-control.py-filter .selectize-dropdown .option,
.selectize-dropdown.py-filter-dropdown .option {
  padding: 7px 12px;
}

.py-filter.selectize-control .selectize-dropdown .option.active,
.selectize-control.py-filter .selectize-dropdown .option.active,
.selectize-dropdown.py-filter-dropdown .option.active {
  background: var(--py-primary-soft, #e8f4fc);
  color: var(--py-text, #0f172a);
}

.py-filter.selectize-control:has(.selectize-input.dropdown-active),
.selectize-control.py-filter:has(.selectize-input.dropdown-active) {
  z-index: 1061;
}

/**
 * Pref toggle — Oui | label | Non (PLR look, no Bootstrap Switch)
 * Sliding 3-part control matching action-sheet / project-list prefs.
 */
.py-toggle {
  --py-toggle-h: 32px;
  --py-toggle-handle: 2.35rem;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
}

.py-toggle__input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
}

.py-toggle__ui {
  display: block;
  height: var(--py-toggle-h);
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: none;
  box-sizing: border-box;
}

.py-toggle__container {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  height: 100%;
  width: max-content;
  transition: transform 0.18s ease;
  will-change: transform;
}

/* ON: show Oui + label · OFF: show label + Non */
.py-toggle:not(:has(.py-toggle__input:checked)) .py-toggle__container {
  transform: translateX(calc(-1 * var(--py-toggle-handle)));
}

.py-toggle__on,
.py-toggle__off,
.py-toggle__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 8px;
  font-family: var(--py-font);
  font-weight: 600;
  line-height: var(--py-toggle-h);
  white-space: nowrap;
  box-sizing: border-box;
}

.py-toggle__on,
.py-toggle__off {
  flex: 0 0 var(--py-toggle-handle);
  width: var(--py-toggle-handle);
  font-size: 11px;
  color: #94a3b8;
  background: transparent;
}

.py-toggle__label {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: #222222;
  background: #f8fafc;
}

.py-toggle:has(.py-toggle__input:checked) .py-toggle__on,
.py-toggle:not(:has(.py-toggle__input:checked)) .py-toggle__off {
  background: #e2e8f0;
  color: #475569;
}

/* Active pref (filteron) — même jaune soft que les filtres catalogue */
.py-toggle.filteron .py-toggle__ui,
.py-toggle:has(.py-toggle__input:checked).py-toggle--filteron .py-toggle__ui {
  border-color: color-mix(in srgb, var(--highlight-color, #ebdc99) 55%, #e2e8f0);
  background-color: var(--highlight-soft-color, #fff3cd);
  box-shadow: none;
}

.py-toggle.filteron .py-toggle__label,
.py-toggle:has(.py-toggle__input:checked).py-toggle--filteron .py-toggle__label {
  background-color: var(--highlight-soft-color, #fff3cd);
  color: #222222;
  font-weight: 700;
}

.py-toggle.filteron .py-toggle__on,
.py-toggle.filteron .py-toggle__off,
.py-toggle:has(.py-toggle__input:checked).py-toggle--filteron .py-toggle__on,
.py-toggle:has(.py-toggle__input:checked).py-toggle--filteron .py-toggle__off {
  background: var(--highlight-soft-color, #fff3cd);
  color: #222222;
  font-weight: 700;
}

/* Trait entre Oui/Non et le libellé quand le filtre est actif (discret). */
.py-toggle.filteron:has(.py-toggle__input:checked) .py-toggle__on,
.py-toggle:has(.py-toggle__input:checked).py-toggle--filteron .py-toggle__on {
  border-right: 1px solid rgba(15, 23, 42, 0.1);
}

.py-toggle.filteron:not(:has(.py-toggle__input:checked)) .py-toggle__label,
.py-toggle:not(:has(.py-toggle__input:checked)).py-toggle--filteron .py-toggle__label {
  border-right: 1px solid rgba(15, 23, 42, 0.1);
}

/*
 * bootstrap-switch actif (Oui + libellé) — même jaune soft que les filtres catalogue + trait discret.
 * Couvre listes, fiche action, action-sheet, etc.
 */
.bootstrap-switch.filteron {
  border-color: color-mix(in srgb, var(--highlight-color, #ebdc99) 55%, #e2e8f0) !important;
  background-color: var(--highlight-soft-color, #fff3cd) !important;
  box-shadow: none !important;
}

.bootstrap-switch.filteron .bootstrap-switch-label {
  background-color: var(--highlight-soft-color, #fff3cd) !important;
  color: #222222 !important;
  font-weight: 700;
}

.bootstrap-switch.filteron .bootstrap-switch-handle-on,
.bootstrap-switch.filteron .bootstrap-switch-handle-off,
.bootstrap-switch.filteron .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch.filteron .bootstrap-switch-handle-off.bootstrap-switch-success,
.bootstrap-switch.filteron .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch.filteron .bootstrap-switch-handle-off.bootstrap-switch-primary,
.bootstrap-switch.filteron .bootstrap-switch-handle-on.bootstrap-switch-default,
.bootstrap-switch.filteron .bootstrap-switch-handle-off.bootstrap-switch-default,
.bootstrap-switch.filteron .bootstrap-switch-handle-on.bootstrap-switch-warning,
.bootstrap-switch.filteron .bootstrap-switch-handle-off.bootstrap-switch-warning {
  background: var(--highlight-soft-color, #fff3cd) !important;
  background-image: none !important;
  color: #222222 !important;
  font-weight: 700;
}

.bootstrap-switch.filteron.bootstrap-switch-on .bootstrap-switch-handle-on {
  border-right: 1px solid rgba(15, 23, 42, 0.1) !important;
}

.bootstrap-switch.filteron.bootstrap-switch-off .bootstrap-switch-label {
  border-right: 1px solid rgba(15, 23, 42, 0.1) !important;
}

.py-toggle:has(.py-toggle__input:focus-visible) .py-toggle__ui {
  outline: none;
  box-shadow: 0 0 0 2px var(--py-focus-ring);
}

/* Viewport width = handle + label (label width set by PyUI / --py-toggle-label-w) */
.py-toggle__ui {
  width: calc(var(--py-toggle-handle) + var(--py-toggle-label-w, 5.5rem));
}

/* Caret (no Bootstrap dependency) */
.py-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

/* Soft (tinted).
 * warning/info/success/danger *-light tokens are ~40% tints (tone-on-tone);
 * wash at ~10% like primary/purple, and darken the ink for readable contrast.
 */
.py-btn--soft.py-btn--primary,
.py-btn--primary.py-btn--soft {
  background: var(--py-primary-soft);
  border-color: color-mix(in srgb, var(--py-primary) 22%, #fff);
  color: var(--py-primary);
}

.py-btn--soft.py-btn--success,
.py-btn--success.py-btn--soft {
  background: color-mix(in srgb, var(--py-success) 10%, #fff);
  border-color: color-mix(in srgb, var(--py-success) 22%, #fff);
  color: color-mix(in srgb, var(--py-success) 62%, #0f172a);
}

.py-btn--soft.py-btn--danger,
.py-btn--danger.py-btn--soft {
  background: color-mix(in srgb, var(--py-danger) 10%, #fff);
  border-color: color-mix(in srgb, var(--py-danger) 22%, #fff);
  color: color-mix(in srgb, var(--py-danger) 62%, #0f172a);
}

.py-btn--soft.py-btn--warning,
.py-btn--warning.py-btn--soft {
  background: color-mix(in srgb, var(--py-warning) 10%, #fff);
  border-color: color-mix(in srgb, var(--py-warning) 22%, #fff);
  color: color-mix(in srgb, var(--py-warning) 62%, #0f172a);
}

.py-btn--soft.py-btn--purple,
.py-btn--purple.py-btn--soft {
  background: var(--py-purple-soft);
  border-color: color-mix(in srgb, var(--py-purple) 22%, #fff);
  color: var(--py-purple);
}

.py-btn--soft.py-btn--info,
.py-btn--info.py-btn--soft {
  background: color-mix(in srgb, var(--py-info) 10%, #fff);
  border-color: color-mix(in srgb, var(--py-info) 22%, #fff);
  color: color-mix(in srgb, var(--py-info) 62%, #0f172a);
}

.py-btn--soft.py-btn--neutral,
.py-btn--neutral.py-btn--soft {
  background: var(--py-neutral-soft);
  border-color: var(--py-neutral-border);
  color: var(--py-neutral-text);
}

/*
 * White (outline-ish): border = text color attenuated (~40%).
 * Must stay at 2-class specificity to beat `button.py-btn`.
 * primary/purple *-light tokens are ~10% washes (look gray on #fff);
 * success/danger/warning/info *-light are already ~40% tints — same formula for all.
 */
.py-btn--white.py-btn--primary,
.py-btn--primary.py-btn--white {
  background: #fff;
  border-color: color-mix(in srgb, var(--py-primary) 40%, #fff);
  color: var(--py-primary);
}

.py-btn--white.py-btn--success,
.py-btn--success.py-btn--white {
  background: #fff;
  border-color: color-mix(in srgb, var(--py-success) 40%, #fff);
  color: var(--py-success);
}

.py-btn--white.py-btn--danger,
.py-btn--danger.py-btn--white {
  background: #fff;
  border-color: color-mix(in srgb, var(--py-danger) 40%, #fff);
  color: var(--py-danger-text);
}

.py-btn--white.py-btn--warning,
.py-btn--warning.py-btn--white {
  background: #fff;
  border-color: color-mix(in srgb, var(--py-warning) 40%, #fff);
  color: var(--py-warning);
}

.py-btn--white.py-btn--purple,
.py-btn--purple.py-btn--white {
  background: #fff;
  border-color: color-mix(in srgb, var(--py-purple) 40%, #fff);
  color: var(--py-purple);
}

.py-btn--white.py-btn--neutral,
.py-btn--neutral.py-btn--white {
  background: #fff;
  border-color: var(--py-neutral-border);
  color: var(--py-neutral-text);
}

.py-btn--white.py-btn--info,
.py-btn--info.py-btn--white {
  background: #fff;
  border-color: color-mix(in srgb, var(--py-info) 40%, #fff);
  color: var(--py-info);
}

/* Solid (filled CTA).
 * A semantic color without --soft/--white also fills: the HTML token is
 * --solid, but omitting it used to leave the gray .py-btn base.
 * --neutral stays the gray base unless combined with --soft or --white.
 */
.py-btn--primary:not(.py-btn--soft):not(.py-btn--white) {
  background: var(--py-primary);
  border-color: var(--py-primary);
  color: #fff;
}

.py-btn--success:not(.py-btn--soft):not(.py-btn--white) {
  background: var(--py-success);
  border-color: var(--py-success);
  color: #fff;
}

.py-btn--danger:not(.py-btn--soft):not(.py-btn--white) {
  background: var(--py-danger);
  border-color: var(--py-danger);
  color: #fff;
}

.py-btn--danger:not(.py-btn--soft):not(.py-btn--white):hover,
.py-btn--danger:not(.py-btn--soft):not(.py-btn--white):focus {
  background: var(--py-danger-dark);
  border-color: var(--py-danger-dark);
  color: #fff;
}

.py-btn--warning:not(.py-btn--soft):not(.py-btn--white) {
  background: var(--py-warning);
  border-color: var(--py-warning);
  color: #fff;
}

.py-btn--purple:not(.py-btn--soft):not(.py-btn--white) {
  background: var(--py-purple);
  border-color: var(--py-purple);
  color: #fff;
}

.py-btn--info:not(.py-btn--soft):not(.py-btn--white) {
  background: var(--py-info);
  border-color: var(--py-info);
  color: #fff;
}

/* Hover / focus — soft & white */
.py-btn--soft:hover,
.py-btn--soft:focus,
.py-btn--white:hover,
.py-btn--white:focus {
  background: #f1f5f9;
  border-color: rgba(100, 116, 139, 0.45);
}

.py-btn--soft.py-btn--primary:hover,
.py-btn--soft.py-btn--primary:focus,
.py-btn--white.py-btn--primary:hover,
.py-btn--white.py-btn--primary:focus {
  background: var(--py-primary-soft-strong);
  border-color: var(--py-primary);
  color: var(--py-primary);
}

.py-btn--soft.py-btn--danger:hover,
.py-btn--soft.py-btn--danger:focus,
.py-btn--white.py-btn--danger:hover,
.py-btn--white.py-btn--danger:focus {
  background: color-mix(in srgb, var(--py-danger) 16%, #fff);
  border-color: var(--py-danger);
  color: color-mix(in srgb, var(--py-danger) 62%, #0f172a);
}

.py-btn--soft.py-btn--info:hover,
.py-btn--soft.py-btn--info:focus,
.py-btn--white.py-btn--info:hover,
.py-btn--white.py-btn--info:focus {
  background: color-mix(in srgb, var(--py-info) 16%, #fff);
  border-color: var(--py-info);
  color: color-mix(in srgb, var(--py-info) 62%, #0f172a);
}

.py-btn--soft.py-btn--success:hover,
.py-btn--soft.py-btn--success:focus,
.py-btn--white.py-btn--success:hover,
.py-btn--white.py-btn--success:focus {
  background: color-mix(in srgb, var(--py-success) 16%, #fff);
  border-color: var(--py-success);
  color: color-mix(in srgb, var(--py-success) 62%, #0f172a);
}

.py-btn--soft.py-btn--warning:hover,
.py-btn--soft.py-btn--warning:focus,
.py-btn--white.py-btn--warning:hover,
.py-btn--white.py-btn--warning:focus {
  background: color-mix(in srgb, var(--py-warning) 16%, #fff);
  border-color: var(--py-warning);
  color: color-mix(in srgb, var(--py-warning) 62%, #0f172a);
}

.py-btn--soft.py-btn--purple:hover,
.py-btn--soft.py-btn--purple:focus,
.py-btn--white.py-btn--purple:hover,
.py-btn--white.py-btn--purple:focus {
  background: var(--py-purple-soft);
  border-color: var(--py-purple);
  color: var(--py-purple);
}

.py-btn--solid:hover,
.py-btn--solid:focus,
.py-btn:is(.py-btn--primary, .py-btn--success, .py-btn--warning, .py-btn--purple, .py-btn--info):not(.py-btn--soft):not(.py-btn--white):hover,
.py-btn:is(.py-btn--primary, .py-btn--success, .py-btn--warning, .py-btn--purple, .py-btn--info):not(.py-btn--soft):not(.py-btn--white):focus {
  filter: brightness(0.95);
  color: #fff;
}

/* Pressed / off */
.py-btn.off,
.py-btn[aria-pressed="false"].off {
  opacity: 0.55;
  text-decoration: line-through;
  box-shadow: none;
}

/* Soft primary press — do not override white/outline chips (search-like filters) */
.py-btn.is-active:not(.py-btn--white),
.py-btn[aria-pressed="true"]:not(.py-btn--white) {
  background: var(--py-primary-soft);
  border-color: var(--py-primary-border);
  color: var(--py-primary);
}

/*
 * Options / more (⋮) — ghost: icône seule, pas de bordure.
 * Alias : .alr-action-more-toggle, .dimadmin-more-btn (listes existantes).
 */
.py-btn:is(.py-btn--more, .alr-action-more-toggle, .dimadmin-more-btn) {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px !important;
  padding: 0 !important;
  gap: 0;
  margin: 0;
  border: none !important;
  border-radius: 8px;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--darkgray-color, #797979) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.py-btn:is(.py-btn--more, .alr-action-more-toggle, .dimadmin-more-btn) > i {
  font-size: 13px;
  pointer-events: none;
}

.py-btn:is(.py-btn--more, .alr-action-more-toggle, .dimadmin-more-btn):is(:hover, :focus, :focus-visible, :active),
.open > .py-btn:is(.py-btn--more, .alr-action-more-toggle, .dimadmin-more-btn),
.btn-group.open > .py-btn:is(.py-btn--more, .alr-action-more-toggle, .dimadmin-more-btn),
.py-dropdown.is-open > .py-btn:is(.py-btn--more, .alr-action-more-toggle, .dimadmin-more-btn) {
  background: color-mix(in srgb, var(--gray-color, #bebebe) 22%, #fff) !important;
  color: var(--darkgray-color, #797979) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* DEVMODE marker — must win over --white / --neutral */
.py-btn.devmode_sty,
.py-btn.py-btn--white.devmode_sty,
.py-btn.py-btn--neutral.devmode_sty,
.py-btn.py-btn--white.py-btn--neutral.devmode_sty {
  color: var(--purpledark-color);
  background: var(--purplelight-color);
  border-color: color-mix(in srgb, var(--purple-color) 40%, #fff);
}

.py-btn.devmode_sty:hover,
.py-btn.devmode_sty:focus,
.py-btn.py-btn--white.devmode_sty:hover,
.py-btn.py-btn--white.devmode_sty:focus,
.py-btn.py-btn--white.py-btn--neutral.devmode_sty:hover,
.py-btn.py-btn--white.py-btn--neutral.devmode_sty:focus {
  color: var(--purpledark-color);
  background: color-mix(in srgb, var(--purple-color) 18%, #fff);
  border-color: var(--purple-color);
}

.py-btn.devmode_sty i,
.py-btn.devmode_sty .fa-file-pdf {
  color: var(--purple-color);
}