.app-toasts {
  position: fixed;
  right: var(--ny-space-4);
  bottom: var(--ny-space-4);
  z-index: var(--ny-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--ny-space-2);
  max-width: min(420px, calc(100vw - 2 * var(--ny-space-4)));
}

.app-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--ny-space-3);
  padding: var(--ny-space-3) var(--ny-space-4);
  border: 1px solid var(--ny-border);
  border-left: 3px solid var(--ny-info);
  border-radius: var(--ny-radius);
  background: var(--ny-surface-elevated);
  color: var(--ny-text);
  font-size: var(--ny-text-sm);
  line-height: var(--ny-leading);
  box-shadow: var(--ny-shadow-lg);
}

.app-toast-error {
  border-left-color: var(--ny-danger);
}

.app-toast-success {
  border-left-color: var(--ny-success);
}

.app-toast-warning {
  border-left-color: var(--ny-warning);
}

.app-toast-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.app-toast-close {
  flex: none;
  margin: 0;
  color: var(--ny-text-muted);
  cursor: pointer;
}

.app-toast-close:hover,
.app-toast-close:focus-visible {
  color: var(--ny-text);
}

.ui-loading {
  position: absolute;
  inset: 0;
  z-index: var(--ny-z-sticky);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ny-space-3);
  border-radius: inherit;
  background: color-mix(in srgb, var(--ny-surface) 80%, transparent);
  color: var(--ny-text-muted);
  font-size: var(--ny-text-sm);
}

:has(> .ui-loading) {
  position: relative;
}

.ui-loading-spin {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ny-border);
  border-top-color: var(--ny-primary);
  border-radius: var(--ny-radius-pill);
  animation: ui-loading-turn 0.7s linear infinite;
}

@keyframes ui-loading-turn {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-loading-spin {
    animation: none;
  }
}

.loading-block {
  padding: var(--ny-space-6);
  color: var(--ny-text-muted);
  font-size: var(--ny-text-sm);
  text-align: center;
}

body.is-modal-open {
  overflow: hidden;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--ny-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ny-space-4);
  background: rgb(0 0 0 / 0.5);
}

.modal-backdrop > .modal {
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: calc(100vh - 2 * var(--ny-space-4));
  border: 1px solid var(--ny-border);
  border-radius: var(--ny-radius-lg);
  background: var(--ny-surface-elevated);
  color: var(--ny-text);
  box-shadow: var(--ny-shadow-lg);
  outline: none;
}

.modal-backdrop > .modal-small {
  width: min(400px, 100%);
}

.modal-backdrop > .modal-large {
  width: min(880px, 100%);
}

.modal-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--ny-space-3);
  padding: var(--ny-space-4);
  border-bottom: 1px solid var(--ny-border);
}

.modal-head > h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--ny-text-lg);
  font-weight: var(--ny-weight-semibold);
  line-height: var(--ny-leading-tight);
}

.modal-close {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--ny-radius-sm);
  background: transparent;
  color: var(--ny-text-muted);
  cursor: pointer;
}

.modal-close > .icon {
  margin: 0;
}

.modal-close:hover,
.modal-close:focus-visible {
  background: var(--ny-hover);
  color: var(--ny-text);
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--ny-space-4);
  overflow: auto;
}

.modal-foot {
  display: flex;
  flex: none;
  justify-content: flex-end;
  gap: var(--ny-space-2);
  padding: var(--ny-space-3) var(--ny-space-4);
  border-top: 1px solid var(--ny-border);
  border-radius: 0 0 var(--ny-radius-lg) var(--ny-radius-lg);
  background: var(--ny-surface-sunken);
}

.simple-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ny-text-sm);
}

.simple-table th,
.simple-table td {
  padding: var(--ny-space-2) var(--ny-space-3);
  border-bottom: 1px solid var(--ny-border-soft);
  text-align: left;
}

.simple-table th {
  color: var(--ny-text-muted);
  font-weight: var(--ny-weight-semibold);
}

.data-grid {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--ny-border);
  border-radius: var(--ny-radius);
  background: var(--ny-surface);
}

.data-grid-head {
  display: flex;
  align-items: center;
  gap: var(--ny-space-3);
  padding: var(--ny-space-3) var(--ny-space-4);
  border-bottom: 1px solid var(--ny-border);
}

.data-grid-head.is-untitled {
  justify-content: flex-end;
}

.data-grid-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: var(--ny-weight-semibold);
}

.data-grid-tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--ny-space-2);
}

.data-grid-search {
  width: 240px;
  max-width: 100%;
}

.data-grid-scroll {
  min-width: 0;
  overflow-x: auto;
}

.data-grid-scroll > table.ui.table {
  min-width: var(--data-grid-min-width, 0);
  margin: 0;
  border: 0;
  border-radius: 0;
}

.scroll-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--ny-scroll-handle) transparent;
}

.data-grid-state {
  margin: var(--ny-space-4);
}

.data-grid-blank {
  color: var(--ny-text-disabled);
}

.data-grid-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ny-space-3);
  padding: var(--ny-space-3) var(--ny-space-4);
  border-top: 1px solid var(--ny-border);
  background: var(--ny-surface-sunken);
}

.data-grid-pager:empty {
  display: none;
}

.data-grid-count {
  color: var(--ny-text-muted);
  font-size: var(--ny-text-sm);
}

.data-grid-filter-icon {
  margin-left: var(--ny-space-1);
  color: var(--ny-text-muted);
  cursor: pointer;
}

.data-grid-filter-icon:hover {
  color: var(--ny-primary);
}

.data-grid-filter-popup {
  position: absolute;
  z-index: var(--ny-z-dropdown-raised);
  display: flex;
  flex-direction: column;
  gap: var(--ny-space-2);
  min-width: 200px;
  padding: var(--ny-space-3);
  border: 1px solid var(--ny-border);
  border-radius: var(--ny-radius);
  background: var(--ny-surface-elevated);
  box-shadow: var(--ny-shadow-lg);
}

.data-grid-filter-title {
  color: var(--ny-text-muted);
  font-size: var(--ny-text-xs);
  font-weight: var(--ny-weight-semibold);
}

.data-grid-filter-select {
  width: 100%;
  min-height: 32px;
  padding: 0 var(--ny-space-2);
  border: 1px solid var(--ny-border);
  border-radius: var(--ny-radius-sm);
  background: var(--ny-surface);
  color: var(--ny-text);
}

.data-grid-filter-buttons {
  display: flex;
  justify-content: flex-end;
  gap: var(--ny-space-2);
}