/* Notifications system — premium polish 2026-04-26.
   Strips Vegas chrome (translateX hover, scale pulses, multi-layer
   purple glow shadows, hardcoded #color values) for a clean
   palette-2 list. Preserves every selector the JS relies on:
     #notificationButton, .notification-badge, .notification-dropdown
     .notification-header, .notification-heading-row, .notification-meta-row
     .notification-status (.status-live/.status-connecting/etc.)
     .filter-button, .filter-group
     .notification-list, .notification-item (.unread / data-operation)
     .notification-thumbnail (.icon-only), .notification-content
     .notification-title-row, .notification-title, .notification-message
     .notification-meta, .notification-channel, .notification-time
     .notification-actions
     .notification-footer, #markAllRead, #clearAllNotifications
     .operation-badge .badge-{original,processed,failed,...}
     .notification-empty, .notification-error-state, .notification-placeholder*
     .toast, .toast-{success,error,warning,info}, .toast-{icon,content,close,progress}
     #notificationCloseBtn (mobile dropdown close) */


/* -------------------------------------------------- Bell + badge */

/* Button styling provided by .nav-icon in components/_header.css —
   notifications.css owns only the badge that overlays it. */
.notification-center {
  position: relative;
  display: inline-block;
}

.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
  background: var(--theme-red);
  border: 2px solid var(--theme-background);
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}


/* -------------------------------------------------- Dropdown shell */

.notification-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 420px;
  max-height: 600px;
  display: flex;
  flex-direction: column;
  background: var(--theme-surface);
  border: 1px solid var(--color-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 16px 40px rgba(0, 0, 0, 0.3);
  z-index: var(--z-notification);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transition:
    opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard),
    visibility 0s linear var(--duration-base);
  pointer-events: none;
}

.notification-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
  pointer-events: auto;
}


/* -------------------------------------------------- Header */

.notification-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-subtle, rgba(255, 255, 255, 0.06));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
}

.notification-header-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.notification-heading-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-header h5 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--theme-text);
}

.notification-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--theme-text-muted);
}

.notification-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Status pill — compact connection/health indicator */
.notification-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--theme-text-muted);
  background: rgba(var(--theme-text-rgb), 0.05);
  border: 1px solid var(--color-subtle, rgba(255, 255, 255, 0.06));
  white-space: nowrap;
}

.notification-status::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.notification-status.status-live           { color: var(--theme-green); }
.notification-status.status-connecting,
.notification-status.status-reconnecting,
.notification-status.status-initializing,
.notification-status.status-polling        { color: var(--theme-yellow); }
.notification-status.status-offline        { color: var(--theme-red); }


/* Filter dropdown trigger — quiet outline */
.filter-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--theme-text);
  background: transparent;
  border: 1px solid var(--color-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.filter-button:hover {
  background: var(--color-subtle, rgba(255, 255, 255, 0.06));
  border-color: var(--color-default, rgba(255, 255, 255, 0.14));
}

.filter-button i { font-size: 10px; opacity: 0.7; }


/* Mobile-only close button */
.notification-close-btn {
  display: none;
}


/* -------------------------------------------------- Item list */

.notification-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--color-subtle, rgba(255, 255, 255, 0.1)) transparent;
}

.notification-list::-webkit-scrollbar { width: 5px; }
.notification-list::-webkit-scrollbar-track { background: transparent; }
.notification-list::-webkit-scrollbar-thumb {
  background: var(--color-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 3px;
}
.notification-list::-webkit-scrollbar-thumb:hover {
  background: var(--color-default, rgba(255, 255, 255, 0.18));
}

.notification-item {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--color-subtle, rgba(255, 255, 255, 0.04));
  background: transparent;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
  position: relative;
  overflow: hidden;
}

.notification-item:last-child { border-bottom: 0; }

.notification-item:hover {
  background: var(--color-subtle, rgba(255, 255, 255, 0.04));
}

/* Unread — accent dot in upper-right, no flashy bg */
.notification-item.unread::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 16px;
  width: 6px;
  height: 6px;
  background: var(--theme-accent);
  border-radius: 50%;
  z-index: 1;
}


/* Thumbnail / icon column */
.notification-thumbnail {
  position: relative;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  align-self: center;
  margin: 12px 0 12px 14px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--theme-background);
  border: 1px solid var(--color-subtle, rgba(255, 255, 255, 0.06));
}

.notification-thumbnail img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.notification-thumbnail.icon-only {
  background: var(--color-subtle, rgba(255, 255, 255, 0.06));
}

.notification-thumbnail i {
  font-size: 22px;
  color: var(--theme-text-muted);
}

/* Type-specific icon colors */
.notification-item.success .notification-thumbnail i { color: var(--theme-green); }
.notification-item.error   .notification-thumbnail i,
.notification-item.danger  .notification-thumbnail i { color: var(--theme-red);   }
.notification-item.warning .notification-thumbnail i { color: var(--theme-yellow); }
.notification-item.info    .notification-thumbnail i { color: var(--theme-cyan);  }


/* -------------------------------------------------- Operation badges */

.operation-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1.4;
  flex-shrink: 0;
  background: rgba(var(--theme-text-rgb), 0.06);
  color: var(--theme-text);
  border: 1px solid var(--color-subtle, rgba(255, 255, 255, 0.06));
}

.operation-badge.badge-original   { color: var(--theme-text); }
.operation-badge.badge-processed  { color: var(--theme-green);  border-color: rgba(var(--theme-green-rgb),  0.3); background: rgba(var(--theme-green-rgb),  0.08); }
.operation-badge.badge-failed,
.operation-badge.badge-deleted    { color: var(--theme-red);    border-color: rgba(var(--theme-red-rgb),    0.3); background: rgba(var(--theme-red-rgb),    0.08); }
.operation-badge.badge-submitted,
.operation-badge.badge-uploaded   { color: var(--theme-cyan);   border-color: rgba(var(--theme-cyan-rgb),   0.3); background: rgba(var(--theme-cyan-rgb),   0.08); }
.operation-badge.badge-cut        { color: var(--theme-orange); border-color: rgba(var(--theme-orange-rgb), 0.3); background: rgba(var(--theme-orange-rgb), 0.08); }
.operation-badge.badge-reviewed   { color: var(--theme-accent); border-color: rgba(var(--theme-accent-rgb), 0.3); background: rgba(var(--theme-accent-rgb), 0.08); }
.operation-badge.badge-downloaded { color: var(--theme-pink);   border-color: rgba(var(--theme-pink-rgb),   0.3); background: rgba(var(--theme-pink-rgb),   0.08); }


/* -------------------------------------------------- Item content */

.notification-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 14px 14px;
  position: relative;
}

.notification-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 24px;
}

.notification-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--theme-text);
  line-height: 1.35;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.notification-message {
  font-size: 12px;
  line-height: 1.45;
  color: var(--theme-text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notification-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--theme-text-muted);
  margin-top: 2px;
  flex-wrap: wrap;
}

.notification-channel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 7px;
  height: 18px;
  background: rgba(var(--theme-text-rgb), 0.06);
  border-radius: 4px;
  font-weight: 500;
  font-size: 10px;
  white-space: nowrap;
}

.notification-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}


/* -------------------------------------------------- Actions row */

.notification-actions {
  position: absolute;
  top: 12px;
  right: 14px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.notification-item:hover .notification-actions { opacity: 1; }

.notification-actions button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: var(--color-subtle, rgba(255, 255, 255, 0.06));
  color: var(--theme-text-muted);
  border-radius: 5px;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.notification-actions button:hover {
  background: var(--color-default, rgba(255, 255, 255, 0.12));
  color: var(--theme-text);
}

.notification-actions button.delete-notif:hover {
  background: rgba(var(--theme-red-rgb), 0.15);
  color: var(--theme-red);
}


/* -------------------------------------------------- Footer */

.notification-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--color-subtle, rgba(255, 255, 255, 0.06));
  display: flex;
  gap: 8px;
  justify-content: space-between;
  flex-shrink: 0;
}

.notification-footer button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid var(--color-subtle, rgba(255, 255, 255, 0.08));
  background: transparent;
  color: var(--theme-text);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.notification-footer button:hover:not(:disabled) {
  background: var(--color-subtle, rgba(255, 255, 255, 0.06));
  border-color: var(--color-default, rgba(255, 255, 255, 0.12));
}

.notification-footer button#clearAllNotifications {
  color: var(--theme-red);
  border-color: rgba(var(--theme-red-rgb), 0.25);
}

.notification-footer button#clearAllNotifications:hover:not(:disabled) {
  background: rgba(var(--theme-red-rgb), 0.08);
  border-color: rgba(var(--theme-red-rgb), 0.4);
}

.notification-footer button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* -------------------------------------------------- Empty / loading / error */

.notification-empty {
  padding: 56px 24px;
  text-align: center;
  color: var(--theme-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.notification-empty .empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--color-subtle, rgba(255, 255, 255, 0.06));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-text-muted);
  font-size: 22px;
}

.notification-empty .empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--theme-text);
}

.notification-empty .empty-subtitle {
  font-size: 12px;
}

.notification-error-state {
  margin: 16px;
  padding: 14px;
  border-radius: 10px;
  background: rgba(var(--theme-red-rgb), 0.08);
  border: 1px solid rgba(var(--theme-red-rgb), 0.2);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.notification-error-state .error-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(var(--theme-red-rgb), 0.12);
  color: var(--theme-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.notification-error-state .error-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notification-error-state .error-title {
  font-weight: 600;
  color: var(--theme-red);
  font-size: 13px;
}

.notification-error-state .error-message {
  font-size: 12px;
  color: var(--theme-text-muted);
}

.notification-inline-alert {
  margin: 0 16px 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--color-subtle, rgba(255, 255, 255, 0.06));
  color: var(--theme-text);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-inline-alert i {
  color: var(--theme-cyan);
  font-size: 12px;
}


/* Skeleton placeholder loader */
.notification-placeholder-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.notification-placeholder {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-subtle, rgba(255, 255, 255, 0.04));
}

.placeholder-thumb,
.placeholder-line,
.placeholder-pill {
  position: relative;
  overflow: hidden;
  background: var(--color-subtle, rgba(255, 255, 255, 0.04));
}

.placeholder-thumb { flex: 0 0 56px; height: 56px; border-radius: 10px; }
.placeholder-body  { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.placeholder-line  { height: 10px; border-radius: 999px; }
.placeholder-line.w-70 { width: 70%; }
.placeholder-line.w-45 { width: 45%; }
.placeholder-line.w-60 { width: 60%; }
.placeholder-line.w-80 { width: 80%; }
.placeholder-meta  { display: flex; align-items: center; gap: 8px; }
.placeholder-pill  { height: 12px; border-radius: 999px; }
.placeholder-pill.w-30 { width: 30%; }
.placeholder-pill.w-20 { width: 20%; }

.placeholder-thumb::after,
.placeholder-line::after,
.placeholder-pill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%);
  transform: translateX(-100%);
  animation: notif-shimmer 1.4s ease-in-out infinite;
}

@keyframes notif-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

body.light-mode .placeholder-thumb::after,
body.light-mode .placeholder-line::after,
body.light-mode .placeholder-pill::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.06) 50%,
    transparent 100%);
}


/* -------------------------------------------------- Toasts */

.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: var(--z-tooltip);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  min-width: 320px;
  max-width: 420px;
  background: var(--theme-surface);
  border: 1px solid var(--color-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 16px 32px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
  pointer-events: auto;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  position: relative;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.toast-success .toast-icon { background: rgba(var(--theme-green-rgb),  0.12); color: var(--theme-green);  }
.toast-error   .toast-icon,
.toast-danger  .toast-icon { background: rgba(var(--theme-red-rgb),    0.12); color: var(--theme-red);    }
.toast-warning .toast-icon { background: rgba(var(--theme-yellow-rgb), 0.12); color: var(--theme-yellow); }
.toast-info    .toast-icon { background: rgba(var(--theme-cyan-rgb),   0.12); color: var(--theme-cyan);   }

.toast-content { flex: 1; min-width: 0; }

.toast-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--theme-text);
  margin: 0 0 2px;
  letter-spacing: -0.005em;
}

.toast-message {
  font-size: 12px;
  line-height: 1.4;
  color: var(--theme-text-muted);
  margin: 0;
  word-wrap: break-word;
}

.toast-close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--theme-text-muted);
  border-radius: 5px;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.toast-close:hover {
  background: var(--color-subtle, rgba(255, 255, 255, 0.08));
  color: var(--theme-text);
}

.toast-close::before { content: '×'; }

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--theme-accent);
  animation: toast-countdown 5s linear forwards;
}

.toast-success .toast-progress { background: var(--theme-green);  }
.toast-error   .toast-progress,
.toast-danger  .toast-progress { background: var(--theme-red);    }
.toast-warning .toast-progress { background: var(--theme-yellow); }
.toast-info    .toast-progress { background: var(--theme-cyan);   }

@keyframes toast-countdown {
  from { width: 100%; }
  to   { width: 0%; }
}


/* -------------------------------------------------- Mobile (<=768) */

@media (max-width: 768px) {
  /* Mobile: dropdown opens as a full-width panel pinned between the
     status-bar safe area at top and the bottom dock at the bottom.
     The bell now lives in the dock — opening downward would clip
     beneath it, so we anchor with top + bottom and let the inner
     list scroll. */
  .notification-dropdown {
    position: fixed;
    right: 8px;
    left: 8px;
    top: calc(8px + env(safe-area-inset-top, 0px));
    bottom: calc(102px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: none;
    border-radius: 18px;
  }

  .notification-close-btn {
    display: flex;
    width: 28px;
    height: 28px;
  }

  .notification-thumbnail {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
    margin-left: 12px;
  }

  .toast-container {
    bottom: 12px;
    left: 12px;
    right: 12px;
  }

  .toast {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .notification-header { padding: 12px; gap: 8px; }
  .notification-header h5 { font-size: 13px; }

  .notification-content { padding: 10px 12px 10px 10px; }
  .notification-thumbnail { margin-left: 10px; }

  .notification-footer { padding: 10px 12px; gap: 6px; }
  .notification-footer button { font-size: 11px; height: 30px; }
}


/* -------------------------------------------------- Light mode */

body.light-mode .notification-badge {
  border-color: var(--theme-background);
}

body.light-mode .notification-thumbnail {
  background: rgba(0, 0, 0, 0.03);
}

body.light-mode .notification-thumbnail.icon-only {
  background: rgba(0, 0, 0, 0.04);
}