/* ===== ALERTS WIDGET - APPLE-LIKE DARK THEME ===== */
.alerts-list {
  font-size: 13px;
}

.alert-item {
  position: relative;
  margin-bottom: var(--spacing-sm);
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
  animation: none;
}

.alert-item:last-child {
  margin-bottom: 0;
}

.alert-clickable {
  cursor: pointer;
}

.alert-clickable:hover {
  filter: none;
  background: var(--bg-surface);
}

/* ===== CLICK ACTION OVERLAY ===== */
.alert-actions-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--bg-glass);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-default),
              visibility var(--duration-fast) var(--ease-default);
}

.alert-actions-overlay.active {
  opacity: 1;
  visibility: visible;
}

.btn-action-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--text-base);
  cursor: pointer;
  box-shadow: none;
  transition: color var(--duration-fast) var(--ease-default),
              background-color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}

.btn-action-overlay:hover {
  transform: none;
  box-shadow: none;
}

.btn-action-edit-overlay {
  background: var(--primary-subtle);
  border-color: var(--primary);
  color: var(--primary);
}

.btn-action-edit-overlay:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-inverse);
}

.btn-action-delete-overlay {
  background: var(--danger-subtle);
  border-color: var(--danger);
  color: var(--danger);
}

.btn-action-delete-overlay:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--text-inverse);
}

.btn-action-close {
  background: var(--secondary-subtle);
  border-color: var(--primary);
  color: var(--text-secondary);
}

.btn-action-close:hover {
  background: var(--secondary);
  border-color: var(--primary);
  color: var(--text-on-action);
}

/* ===== PRIORITY STATES ===== */
.alert-priority-high {
  background: var(--danger-subtle);
  border-color: var(--danger);
  box-shadow: none;
  animation: none;
}

.alert-priority-high .alert-title {
  color: var(--danger);
  text-shadow: none;
}

.alert-priority-high .alert-content {
  color: var(--danger-hover);
}

.alert-priority-medium {
  background: var(--warning-subtle);
  border-color: var(--warning);
  box-shadow: none;
  animation: none;
}

.alert-priority-medium .alert-title {
  color: var(--warning);
  text-shadow: none;
}

.alert-priority-medium .alert-content {
  color: var(--warning-hover);
}

.alert-priority-low {
  background: var(--success-subtle);
  border-color: var(--success);
  box-shadow: none;
  animation: none;
}

.alert-priority-low .alert-title {
  color: var(--success);
}

.alert-priority-low .alert-content {
  color: var(--success-hover);
}

.alert-item .alert-title {
  margin-bottom: 6px;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.alert-item .alert-content {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.alert-separator {
  margin: 8px 0;
  border: 0;
  border-top: 1px solid var(--border-default);
  opacity: 1;
}

.alert-add-container {
  margin-top: 12px;
}

.alert-form {
  padding: 8px 0;
}

.alert-form .form-control,
.alert-form .form-select {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-size: 13px;
}

.alert-form .form-control:focus,
.alert-form .form-select:focus {
  background: var(--bg-surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-subtle);
}

.alert-form .form-control::placeholder {
  color: var(--text-placeholder);
  opacity: 1;
}

#alert-widget {
  overflow: visible;
}

#alert-widget .widget-content {
  max-height: 350px;
  padding: 12px;
  overflow-y: auto;
  background: transparent;
}

#alert-widget .widget-content::-webkit-scrollbar {
  width: 4px;
}

#alert-widget .widget-content::-webkit-scrollbar-track {
  background: transparent;
}

#alert-widget .widget-content::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--radius-full);
}

/* ===== ALERTS MANAGEMENT PAGE ===== */
.alerts-management-page {
  width: min(900px, 100%);
  margin: 0 auto;
  padding: var(--spacing-lg) 0;
}

.alerts-management-page #alert-widget .widget-content {
  max-height: calc(100vh - 230px);
  min-height: 180px;
}

/* ===== WORKBENCH ALERTS ===== */
.breaking-alerts {
  display: flex;
  min-width: 0;
  height: 42px;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.breaking-alerts-viewport {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  align-items: center;
}

.breaking-alerts-track {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
}

.breaking-alerts-track.is-scrolling {
  animation: breaking-alert-scroll var(--alert-ticker-duration, 36s) linear infinite;
}

@keyframes breaking-alert-scroll {
  to {
    transform: translateX(-50%);
  }
}

.breaking-alerts-track.is-static {
  width: 100%;
  min-width: 100%;
  padding: 0 12px;
}

.alert-ticker-sequence,
.alert-ticker-set {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.breaking-alerts-viewport:hover .breaking-alerts-track.is-scrolling {
  animation-play-state: paused;
}

.alert-ticker-item,
.alert-ticker-status {
  display: inline-flex;
  align-items: center;
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.alert-ticker-title {
  margin-right: 6px;
  font-weight: 700;
}

.alert-ticker-priority-high .alert-ticker-title {
  color: var(--danger);
}

.alert-ticker-priority-high .alert-ticker-content {
  color: var(--danger-hover);
}

.alert-ticker-priority-medium .alert-ticker-title {
  color: var(--warning);
}

.alert-ticker-priority-medium .alert-ticker-content {
  color: var(--warning-hover);
}

.alert-ticker-priority-low .alert-ticker-title {
  color: var(--success);
}

.alert-ticker-priority-low .alert-ticker-content {
  color: var(--success-hover);
}

.alert-ticker-crypto-heading {
  color: var(--primary);
  font-weight: 700;
}

.alert-ticker-crypto-symbol {
  margin-right: 6px;
  color: var(--warning);
  font-weight: 700;
}

.alert-ticker-crypto-price {
  color: var(--text-secondary);
}

.alert-ticker-crypto-change {
  margin-left: 6px;
  font-weight: 600;
}

.alert-ticker-crypto-change.is-up {
  color: var(--success);
}

.alert-ticker-crypto-change.is-down {
  color: var(--danger);
}

.alert-ticker-separator {
  margin: 0 22px;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.breaking-alerts-track.is-static {
  overflow: hidden;
}

.breaking-alerts-track.is-static .alert-ticker-set {
  width: 100%;
  min-width: 0;
}

.breaking-alerts-track.is-static .alert-ticker-set > .alert-ticker-item:first-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.breaking-alerts-track.is-static .alert-ticker-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breaking-alerts-track.is-static .alert-ticker-separator {
  margin: 0 12px;
}

@media (prefers-reduced-motion: reduce) {
  .breaking-alerts {
    height: auto;
    min-height: 42px;
  }

  .breaking-alerts-viewport {
    overflow-x: auto;
  }

  .breaking-alerts-track,
  .breaking-alerts-track.is-scrolling {
    min-width: 100%;
    padding: 8px 12px;
    white-space: normal;
    animation: none;
    will-change: auto;
  }

  .alert-ticker-sequence-copy,
  .alert-ticker-set-copy {
    display: none;
  }

  .alert-ticker-set > .alert-ticker-separator:last-child {
    display: none;
  }
}