:root {
  --button-primary: var(--accent, #147a6f);
  --button-primary-hover: var(--accent-hover, #0f685f);
  --button-primary-pressed: var(--accent-pressed, #0b574f);
  --button-primary-border: #08786f;
  --button-primary-border-hover: #075f58;
  --button-primary-background:
    linear-gradient(116deg, rgba(255, 255, 255, .07) 0 18%, transparent 18% 62%, rgba(255, 255, 255, .04) 62% 74%, transparent 74%),
    radial-gradient(circle at 78% 18%, rgba(70, 226, 207, .2), transparent 38%),
    linear-gradient(135deg, #06645d 0%, #098f83 54%, #05564f 100%);
  --button-primary-background-hover:
    linear-gradient(116deg, rgba(255, 255, 255, .1) 0 18%, transparent 18% 62%, rgba(255, 255, 255, .05) 62% 74%, transparent 74%),
    radial-gradient(circle at 78% 18%, rgba(80, 238, 217, .26), transparent 40%),
    linear-gradient(135deg, #075d56 0%, #0a887e 54%, #044e49 100%);
  --button-primary-background-pressed: #076e66;
  --button-primary-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    0 5px 12px rgba(8, 126, 116, .25);
  --button-primary-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 6px 14px rgba(8, 126, 116, .28);
  --button-primary-shadow-pressed:
    inset 0 3px 7px rgba(0, 0, 0, .28),
    0 1px 2px rgba(8, 126, 116, .14);
  --button-secondary: var(--panel, #ffffff);
  --button-secondary-background: linear-gradient(180deg, #ffffff 0%, #f6f8fa 100%);
  --button-secondary-background-hover: linear-gradient(180deg, #ffffff 0%, #eef2f5 100%);
  --button-secondary-background-pressed: #edf1f4;
  --button-secondary-border: #c5ced8;
  --button-secondary-border-hover: #98a5b5;
  --button-secondary-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 4px rgba(23, 32, 51, .1);
  --button-secondary-shadow-hover:
    inset 0 1px 0 #ffffff,
    0 4px 8px rgba(23, 32, 51, .14);
  --button-secondary-shadow-pressed:
    inset 0 3px 6px rgba(23, 32, 51, .16),
    0 1px 2px rgba(23, 32, 51, .06);
  --button-tertiary-background-hover: linear-gradient(180deg, #ffffff 0%, #f1f5f6 100%);
  --button-tertiary-background-pressed: #e8edef;
  --button-tertiary-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 1px 3px rgba(23, 32, 51, .09);
  --button-tertiary-shadow-pressed:
    inset 0 2px 5px rgba(23, 32, 51, .15),
    0 1px 1px rgba(23, 32, 51, .04);
  --button-warning-background: linear-gradient(180deg, #fffdf7 0%, #fff0ce 100%);
  --button-warning-background-hover: linear-gradient(180deg, #fffdf5 0%, #ffe5ac 100%);
  --button-warning-background-pressed: #f4d18d;
  --button-warning-border: #d7a64c;
  --button-warning-border-hover: #c48a23;
  --button-warning-border-pressed: #bd7b13;
  --button-warning-text: #825100;
  --button-warning-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 3px 7px rgba(174, 107, 0, .14);
  --button-warning-shadow-hover:
    inset 0 1px 0 #ffffff,
    0 6px 12px rgba(174, 107, 0, .2);
  --button-warning-shadow-pressed:
    inset 0 3px 6px rgba(120, 70, 0, .2),
    0 1px 2px rgba(174, 107, 0, .08);
  --button-warning-focus-ring: rgba(201, 120, 8, .2);
  --button-cancel-background: linear-gradient(180deg, #fffdfd 0%, #fff4f3 100%);
  --button-cancel-background-hover: linear-gradient(180deg, #fffafa 0%, #feeae8 100%);
  --button-cancel-background-pressed: #f8deda;
  --button-cancel-border: #d6a7a3;
  --button-cancel-border-hover: #c77f79;
  --button-cancel-text: #a13c35;
  --button-cancel-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 4px rgba(161, 60, 53, .09);
  --button-cancel-shadow-hover:
    inset 0 1px 0 #ffffff,
    0 4px 8px rgba(161, 60, 53, .14);
  --button-cancel-shadow-pressed:
    inset 0 3px 6px rgba(113, 39, 34, .17),
    0 1px 2px rgba(161, 60, 53, .06);
  --button-border: var(--line, #d8dee7);
  --button-border-hover: #c7d0dc;
  --button-text: var(--text, #172033);
  --button-muted: var(--muted, #687386);
  --button-danger-background:
    linear-gradient(116deg, rgba(255, 255, 255, .08) 0 18%, transparent 18% 62%, rgba(255, 255, 255, .04) 62% 74%, transparent 74%),
    radial-gradient(circle at 78% 18%, rgba(255, 133, 121, .22), transparent 38%),
    linear-gradient(135deg, #7e1712 0%, #c12b22 54%, #74110d 100%);
  --button-danger-background-hover:
    linear-gradient(116deg, rgba(255, 255, 255, .11) 0 18%, transparent 18% 62%, rgba(255, 255, 255, .06) 62% 74%, transparent 74%),
    radial-gradient(circle at 78% 18%, rgba(255, 152, 142, .28), transparent 40%),
    linear-gradient(135deg, #761510 0%, #b8231b 54%, #660d0a 100%);
  --button-danger-background-pressed: #8f1f18;
  --button-danger-border: #8f1f18;
  --button-danger-border-hover: #7b1812;
  --button-danger-border-pressed: #74110d;
  --button-danger-text: #ffffff;
  --button-danger-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    0 5px 12px rgba(157, 32, 24, .25);
  --button-danger-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 6px 14px rgba(157, 32, 24, .3);
  --button-danger-shadow-pressed:
    inset 0 3px 7px rgba(55, 0, 0, .34),
    0 1px 2px rgba(157, 32, 24, .12);
  --button-danger-focus-ring: rgba(180, 35, 24, .22);
  --button-focus-ring: rgba(var(--accent-rgb), .24);
  --icon-button-background: linear-gradient(180deg, #ffffff 0%, #eef3f6 100%);
  --icon-button-background-hover: linear-gradient(180deg, #ffffff 0%, #e8eef2 100%);
  --icon-button-background-pressed: #e6ecef;
  --icon-button-border: #c8d3dc;
  --icon-button-border-hover: #aebcc7;
  --icon-button-text: #27364a;
  --icon-button-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 7px 13px rgba(23, 46, 57, .12);
  --icon-button-shadow-hover:
    inset 0 1px 0 #ffffff,
    0 10px 18px rgba(19, 53, 64, .18);
  --icon-button-shadow-pressed:
    inset 0 3px 6px rgba(32, 55, 66, .18),
    0 1px 2px rgba(23, 46, 57, .06);
  --icon-button-danger-background: linear-gradient(180deg, #fff8f7 0%, #f8dfdc 100%);
  --icon-button-danger-background-hover: linear-gradient(180deg, #fff5f4 0%, #f5d3cf 100%);
  --icon-button-danger-background-pressed: #f1cbc7;
  --icon-button-danger-border: #dc8f87;
  --icon-button-danger-border-hover: #c96f66;
  --icon-button-danger-text: #a72b23;
  --icon-button-danger-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 7px 13px rgba(124, 37, 29, .13);
  --icon-button-danger-shadow-hover:
    inset 0 1px 0 #ffffff,
    0 10px 18px rgba(124, 37, 29, .19);
  --icon-button-danger-shadow-pressed:
    inset 0 3px 6px rgba(113, 39, 34, .2),
    0 1px 2px rgba(124, 37, 29, .07);
  --filter-toggle-border: #c8d4dc;
  --filter-toggle-border-hover: #8fbdb7;
  --filter-toggle-background: var(--panel-soft, #f4f6f9);
  --filter-toggle-background-hover: color-mix(in srgb, var(--accent-soft, #e9f6f3) 52%, var(--panel, #ffffff));
  --filter-toggle-background-selected: color-mix(in srgb, var(--accent-soft, #e9f6f3) 78%, var(--panel, #ffffff));
  --filter-toggle-text: var(--muted, #687386);
  --filter-toggle-text-selected: var(--accent-strong, #0b665d);
  --filter-toggle-inner-selected: inset 0 0 0 1px rgba(var(--accent-rgb), .38);
  --filter-toggle-inner-pressed: inset 0 2px 5px rgba(23, 50, 57, .16);
}

.ui-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid var(--button-border);
  border-radius: var(--radius);
  background: var(--button-secondary);
  color: var(--button-text);
  box-shadow: none;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease,
    transform 80ms ease;
}

.ui-button--compact {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 12px;
}

.ui-button--large {
  min-height: 44px;
  padding: 11px 18px;
}

.ui-button--icon {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  flex: 0 0 40px;
  padding: 0;
}

.ui-button--icon svg {
  width: 18px;
  height: 18px;
}

.ui-button--block {
  width: 100%;
}

.ui-button--primary,
button.primary,
.column-notification-toast__open,
.task-owner-feed__send,
.dossier-comment-send,
.detail-source-link {
  border-color: var(--button-primary-border);
  background: var(--button-primary-background);
  box-shadow: var(--button-primary-shadow);
  color: #ffffff;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease,
    transform 80ms ease;
}

.ui-button--secondary {
  border-color: var(--button-secondary-border);
  background: var(--button-secondary-background);
  color: var(--button-text);
  box-shadow: var(--button-secondary-shadow);
}

.ui-button--tertiary {
  border-color: transparent;
  background: transparent;
  color: var(--button-muted);
}

.ui-button--warning {
  border-color: var(--button-warning-border);
  background: var(--button-warning-background);
  color: var(--button-warning-text);
  box-shadow: var(--button-warning-shadow);
}

.ui-button--danger {
  border-color: var(--button-danger-border);
  background: var(--button-danger-background);
  color: var(--button-danger-text);
  box-shadow: var(--button-danger-shadow);
}

.ui-button--cancel {
  border-color: var(--button-cancel-border);
  background: var(--button-cancel-background);
  color: var(--button-cancel-text);
  box-shadow: var(--button-cancel-shadow);
}

.ui-button--primary:not(:disabled):hover,
button.primary:not(:disabled):hover,
.column-notification-toast__open:not(:disabled):hover,
.task-owner-feed__send:not(:disabled):hover,
.dossier-comment-send:not(:disabled):hover,
.detail-source-link:hover {
  border-color: var(--button-primary-border-hover);
  background: var(--button-primary-background-hover);
  box-shadow: var(--button-primary-shadow-hover);
  color: #ffffff;
  transform: translateY(-1px);
}

.ui-button--secondary:not(:disabled):hover {
  border-color: var(--button-secondary-border-hover);
  background: var(--button-secondary-background-hover);
  box-shadow: var(--button-secondary-shadow-hover);
  transform: translateY(-1px);
}

.ui-button--tertiary:not(:disabled):hover {
  border-color: transparent;
  background: var(--button-tertiary-background-hover);
  color: var(--button-text);
  box-shadow: var(--button-tertiary-shadow-hover);
}

.ui-button--warning:not(:disabled):hover {
  border-color: var(--button-warning-border-hover);
  background: var(--button-warning-background-hover);
  color: var(--button-warning-text);
  box-shadow: var(--button-warning-shadow-hover);
  transform: translateY(-1px);
}

.ui-button--danger:not(:disabled):hover {
  border-color: var(--button-danger-border-hover);
  background: var(--button-danger-background-hover);
  color: var(--button-danger-text);
  box-shadow: var(--button-danger-shadow-hover);
  transform: translateY(-1px);
}

.ui-button--cancel:not(:disabled):hover {
  border-color: var(--button-cancel-border-hover);
  background: var(--button-cancel-background-hover);
  color: var(--button-cancel-text);
  box-shadow: var(--button-cancel-shadow-hover);
  transform: translateY(-1px);
}

.ui-button--primary:not(:disabled):active,
button.primary:not(:disabled):active,
.column-notification-toast__open:not(:disabled):active,
.task-owner-feed__send:not(:disabled):active,
.dossier-comment-send:not(:disabled):active,
.detail-source-link:active {
  border-color: var(--button-primary-border-hover);
  background: var(--button-primary-background-pressed);
  box-shadow: var(--button-primary-shadow-pressed);
  color: #ffffff;
  transform: translateY(1px);
}

.ui-button--secondary:not(:disabled):active {
  border-color: var(--button-secondary-border-hover);
  background: var(--button-secondary-background-pressed);
  box-shadow: var(--button-secondary-shadow-pressed);
}

.ui-button--tertiary:not(:disabled):active {
  border-color: transparent;
  background: var(--button-tertiary-background-pressed);
  color: var(--button-text);
  box-shadow: var(--button-tertiary-shadow-pressed);
}

.ui-button--warning:not(:disabled):active {
  border-color: var(--button-warning-border-pressed);
  background: var(--button-warning-background-pressed);
  color: var(--button-warning-text);
  box-shadow: var(--button-warning-shadow-pressed);
}

.ui-button--danger:not(:disabled):active {
  border-color: var(--button-danger-border-pressed);
  background: var(--button-danger-background-pressed);
  color: var(--button-danger-text);
  box-shadow: var(--button-danger-shadow-pressed);
}

.ui-button--cancel:not(:disabled):active {
  border-color: var(--button-cancel-border-hover);
  background: var(--button-cancel-background-pressed);
  color: var(--button-cancel-text);
  box-shadow: var(--button-cancel-shadow-pressed);
}

.ui-button:not(:disabled):active {
  transform: translateY(1px);
}

:where(button, .link-button):focus-visible,
.ui-button:focus-visible {
  outline: 3px solid var(--button-focus-ring);
  outline-offset: 2px;
}

.ui-button--primary:focus-visible,
button.primary:focus-visible,
.column-notification-toast__open:focus-visible,
.task-owner-feed__send:focus-visible,
.dossier-comment-send:focus-visible,
.detail-source-link:focus-visible {
  border-color: var(--button-primary-border-hover);
  background: var(--button-primary-background-hover);
  box-shadow: var(--button-primary-shadow-hover);
  color: #ffffff;
}

.ui-button--secondary:focus-visible {
  border-color: var(--button-secondary-border-hover);
  background: var(--button-secondary-background-hover);
  box-shadow: var(--button-secondary-shadow-hover);
}

.ui-button--tertiary:focus-visible {
  border-color: transparent;
  background: var(--button-tertiary-background-hover);
  color: var(--button-text);
  box-shadow: var(--button-tertiary-shadow-hover);
}

.ui-button--warning:focus-visible {
  border-color: var(--button-warning-border-hover);
  background: var(--button-warning-background-hover);
  color: var(--button-warning-text);
  box-shadow: var(--button-warning-shadow-hover);
  outline-color: var(--button-warning-focus-ring);
}

.ui-button--danger:focus-visible {
  border-color: var(--button-danger-border-hover);
  background: var(--button-danger-background-hover);
  color: var(--button-danger-text);
  box-shadow: var(--button-danger-shadow-hover);
  outline-color: var(--button-danger-focus-ring);
}

.ui-button--cancel:focus-visible {
  border-color: var(--button-cancel-border-hover);
  background: var(--button-cancel-background-hover);
  color: var(--button-cancel-text);
  box-shadow: var(--button-cancel-shadow-hover);
}

.ui-button:disabled,
.ui-button[aria-disabled="true"],
.ui-button--cancel:disabled,
.ui-button--cancel[aria-disabled="true"] {
  opacity: .56;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

button.primary:disabled,
.column-notification-toast__open:disabled,
.task-owner-feed__send:disabled,
.dossier-comment-send:disabled {
  box-shadow: none;
  transform: none;
}

.ui-button--warning:disabled,
.ui-button--warning[aria-disabled="true"],
.ui-button--danger:disabled,
.ui-button--danger[aria-disabled="true"] {
  opacity: .52;
}

.ui-button[aria-busy="true"] {
  cursor: progress;
  pointer-events: none;
}

.filter-toggle-group {
  display: flex;
  align-items: center;
  gap: var(--filter-toggle-gap, 3px);
  background: transparent;
}

.filter-toggle-group--scrollable {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.filter-toggle-group--scrollable::-webkit-scrollbar {
  display: none;
}

.filter-toggle {
  min-height: var(--filter-toggle-min-height, 40px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--filter-toggle-control-gap, 8px);
  margin-top: var(--filter-toggle-margin-top, 0);
  padding: var(--filter-toggle-padding-block, 8px) var(--filter-toggle-padding-inline, 18px);
  border: 1px solid var(--filter-toggle-current-border, var(--filter-toggle-border));
  border-radius: var(--radius);
  background: var(--filter-toggle-current-background, var(--filter-toggle-background));
  color: var(--filter-toggle-current-text, var(--filter-toggle-text));
  box-shadow: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--filter-toggle-font-size, 12px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease;
}

.filter-toggle:not(:disabled):hover {
  border-color: var(--filter-toggle-current-border-hover, var(--filter-toggle-border-hover));
  background: var(--filter-toggle-current-background-hover, var(--filter-toggle-background-hover));
  color: var(--filter-toggle-current-text-selected, var(--filter-toggle-text-selected));
}

.filter-toggle:is(.is-active, [aria-pressed="true"], [aria-selected="true"]) {
  margin-top: var(--filter-toggle-active-margin-top, 0);
  border-color: var(--filter-toggle-current-border-selected, var(--accent));
  background: var(--filter-toggle-current-background-selected, var(--filter-toggle-background-selected));
  color: var(--filter-toggle-current-text-selected, var(--filter-toggle-text-selected));
  box-shadow: var(--filter-toggle-current-inner-selected, var(--filter-toggle-inner-selected));
  font-weight: 800;
}

.filter-toggle:not(:disabled):active {
  box-shadow: var(--filter-toggle-current-inner-pressed, var(--filter-toggle-inner-pressed));
}

.filter-toggle:focus-visible {
  border-color: var(--filter-toggle-current-border-selected, var(--accent));
  outline: 3px solid var(--button-focus-ring);
  outline-offset: 2px;
}

.filter-toggle:disabled,
.filter-toggle[aria-disabled="true"] {
  opacity: .48;
  box-shadow: none;
  cursor: not-allowed;
}

.filter-toggle.is-warning {
  --filter-toggle-current-border-selected: #d49a3d;
  --filter-toggle-current-background-selected: #fff4df;
  --filter-toggle-current-text-selected: #885400;
  --filter-toggle-current-inner-selected: inset 0 0 0 1px rgba(190, 119, 7, .28);
}

.ui-icon-button,
.ui-button--icon {
  --icon-button-current-background: var(--icon-button-background);
  --icon-button-current-background-hover: var(--icon-button-background-hover);
  --icon-button-current-background-pressed: var(--icon-button-background-pressed);
  --icon-button-current-border: var(--icon-button-border);
  --icon-button-current-border-hover: var(--icon-button-border-hover);
  --icon-button-current-text: var(--icon-button-text);
  --icon-button-current-shadow: var(--icon-button-shadow);
  --icon-button-current-shadow-hover: var(--icon-button-shadow-hover);
  --icon-button-current-shadow-pressed: var(--icon-button-shadow-pressed);
  border: 1px solid var(--icon-button-current-border);
  border-radius: var(--radius);
  background: var(--icon-button-current-background);
  color: var(--icon-button-current-text);
  box-shadow: var(--icon-button-current-shadow);
  cursor: pointer;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease,
    transform 80ms ease;
}

.ui-icon-button--danger {
  --icon-button-current-background: var(--icon-button-danger-background);
  --icon-button-current-background-hover: var(--icon-button-danger-background-hover);
  --icon-button-current-background-pressed: var(--icon-button-danger-background-pressed);
  --icon-button-current-border: var(--icon-button-danger-border);
  --icon-button-current-border-hover: var(--icon-button-danger-border-hover);
  --icon-button-current-text: var(--icon-button-danger-text);
  --icon-button-current-shadow: var(--icon-button-danger-shadow);
  --icon-button-current-shadow-hover: var(--icon-button-danger-shadow-hover);
  --icon-button-current-shadow-pressed: var(--icon-button-danger-shadow-pressed);
}

.ui-icon-button:not(:disabled):hover,
.ui-button--icon:not(:disabled):hover {
  border-color: var(--icon-button-current-border-hover);
  background: var(--icon-button-current-background-hover);
  color: var(--icon-button-current-text);
  box-shadow: var(--icon-button-current-shadow-hover);
  transform: translateY(-1px);
}

.ui-icon-button:not(:disabled):active,
.ui-button--icon:not(:disabled):active {
  border-color: var(--icon-button-current-border-hover);
  background: var(--icon-button-current-background-pressed);
  color: var(--icon-button-current-text);
  box-shadow: var(--icon-button-current-shadow-pressed);
  transform: translateY(2px);
}

.ui-icon-button:focus-visible,
.ui-button--icon:focus-visible {
  border-color: var(--icon-button-current-border-hover);
  background: var(--icon-button-current-background-hover);
  color: var(--icon-button-current-text);
  box-shadow: var(--icon-button-current-shadow-hover);
  outline: 3px solid var(--button-focus-ring);
  outline-offset: 2px;
}

.ui-icon-button--danger:focus-visible {
  outline-color: var(--button-danger-focus-ring);
}

.ui-icon-button:disabled,
.ui-icon-button[aria-disabled="true"],
.ui-button--icon:disabled,
.ui-button--icon[aria-disabled="true"] {
  opacity: .42;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.ui-button--icon > .material-symbols-outlined {
  font-size: 19px;
}

@media (prefers-reduced-motion: reduce) {
  .ui-button,
  button.primary,
  .column-notification-toast__open,
  .task-owner-feed__send,
  .dossier-comment-send,
  .detail-source-link {
    transition: none;
  }

  .ui-icon-button,
  .ui-button--icon,
  .filter-toggle {
    transition: none;
  }
}
