:root {
  --color-primary: #dc2626;
  --color-background: #f8fafc;
  --color-accent: #0f172a;
  --button-gradient: linear-gradient(135deg, rgba(230, 0, 0, 1) 0%, rgba(222, 0, 75, 1) 100%);
}

.app-shell {
  background-color: var(--color-background);
  background-image: radial-gradient(circle at 10% 20%, var(--bg-layer-1), transparent 35%),
    radial-gradient(circle at 90% 0%, var(--bg-layer-2), transparent 40%);
  color: var(--color-accent);
}

.sidebar-link {
  display: block;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #334155;
  transition: background-color 0.15s ease;
}

.sidebar-link:hover {
  background-color: #f1f5f9;
}

.menu-dots-summary {
  list-style: none;
}

.menu-dots-summary::-webkit-details-marker {
  display: none;
}

.menu-dots-summary::marker {
  content: "";
}

.btn-primary {
  background-color: transparent !important;
  background-image: var(--button-gradient) !important;
  border: 0;
  transition: opacity 0.15s ease;
}

.btn-primary:hover {
  opacity: 0.92;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.toast-notification {
  opacity: 0;
  transform: translateX(18px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  border-width: 1px;
}

.toast-notification.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.toast-notification[data-level="success"] {
  background-color: #ecfdf5 !important;
  border-color: #86efac !important;
  color: #166534 !important;
}

.toast-notification[data-level="warning"] {
  background-color: #fffbeb !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}

.toast-notification[data-level="info"] {
  background-color: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #1e40af !important;
}

.toast-notification[data-level="error"] {
  background-color: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
}

.toast-close {
  color: inherit;
  opacity: 0.75;
}

.toast-close:hover {
  opacity: 1;
}

.table-actions-head,
.table-actions-cell {
  position: sticky;
  right: 0;
}

.table-actions-head {
  z-index: 25;
  background-color: #f8fafc;
  box-shadow: -12px 0 10px -10px rgba(15, 23, 42, 0.2);
}

.table-actions-cell {
  z-index: 15;
  background-color: #fff;
  box-shadow: -12px 0 10px -10px rgba(15, 23, 42, 0.12);
}

tbody tr:hover .table-actions-cell {
  background-color: #f8fafc;
}