@layer components {
  .tracked-exceptions,
  .tracked-exception {
    padding: 1rem clamp(1rem, 2vw, 2rem) 3rem;
    color: #2f343b;
  }

  .tracked-exceptions-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .tracked-exceptions-header h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
  }

  .tracked-exceptions-header p {
    margin: 0.25rem 0 0;
    color: #5f6673;
  }

  .tracked-exceptions-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .tracked-exceptions-status-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 1rem;
    padding: 0.2rem;
    border: 1px solid #d8dde5;
    border-radius: 8px;
    background: #f8fafc;
  }

  .tracked-exceptions-status-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0 0.75rem;
    border-radius: 6px;
    color: #526070;
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
  }

  .tracked-exceptions-status-tab:hover {
    color: #111827;
    text-decoration: none;
  }

  .tracked-exceptions-status-tab.active {
    background: #111827;
    color: #fff;
  }

  .tracked-exceptions-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #e1e6ee;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  .tracked-exceptions-table th,
  .tracked-exceptions-table td {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid #edf0f5;
    text-align: left;
    vertical-align: top;
  }

  .tracked-exceptions-table th {
    color: #697386;
    background: #f8fafc;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .tracked-exceptions-table tr:last-child td {
    border-bottom: 0;
  }

  .tracked-exceptions-table tr.is-resolved {
    color: #697386;
  }

  .tracked-exceptions-table td:nth-child(1) {
    width: 10rem;
    color: #4b5563;
    white-space: nowrap;
  }

  .tracked-exceptions-table td:nth-child(3) {
    max-width: 24rem;
  }

  .tracked-exceptions-table td:nth-child(4),
  .tracked-exceptions-table td:nth-child(5),
  .tracked-exceptions-table td:last-child {
    width: 1%;
    white-space: nowrap;
  }

  .tracked-exceptions-table code {
    display: block;
    overflow: hidden;
    color: #374151;
    font-size: 0.82rem;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tracked-exceptions-message {
    display: block;
    color: #111827;
    font-weight: 750;
    line-height: 1.35;
    text-decoration: none;
  }

  .tracked-exceptions-message:hover {
    text-decoration: underline;
  }

  .tracked-exceptions-context {
    display: block;
    margin-top: 0.2rem;
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.35;
  }

  .tracked-exceptions-count {
    display: inline-flex;
    min-width: 2rem;
    min-height: 1.65rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #eef2f7;
    color: #111827;
    font-weight: 800;
  }

  .tracked-exceptions-status {
    display: inline-flex;
    min-height: 1.65rem;
    align-items: center;
    padding: 0 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
  }

  .tracked-exceptions-status--open {
    background: #fee2e2;
    color: #991b1b;
  }

  .tracked-exceptions-status--resolved {
    background: #dcfce7;
    color: #166534;
  }

  .tracked-exceptions-secondary-action,
  .tracked-exceptions-danger-action,
  .tracked-exception-primary-action,
  .tracked-exception-secondary-action,
  .tracked-exception-danger-action,
  .tracked-exceptions-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
  }

  .tracked-exceptions-secondary-action,
  .tracked-exception-secondary-action {
    min-height: 2.25rem;
    padding: 0 0.8rem;
    background: #eef2f7;
    color: #253041;
  }

  .tracked-exceptions-secondary-action:hover,
  .tracked-exception-secondary-action:hover {
    background: #dfe6f0;
  }

  .tracked-exception-primary-action {
    min-height: 2.25rem;
    padding: 0 0.8rem;
    background: #166534;
    color: #fff;
  }

  .tracked-exception-primary-action:hover {
    background: #14532d;
  }

  .tracked-exception-danger-action {
    min-height: 2.25rem;
    padding: 0 0.8rem;
    background: #dc2626;
    color: #fff;
  }

  .tracked-exceptions-danger-action {
    min-height: 2.25rem;
    padding: 0 0.8rem;
    border: 1px solid #fecaca;
    background: #fff;
    color: #b91c1c;
  }

  .tracked-exception-danger-action:hover {
    background: #b91c1c;
  }

  .tracked-exceptions-danger-action:hover {
    background: #fee2e2;
  }

  .tracked-exceptions-icon-button {
    width: 2rem;
    height: 2rem;
    background: transparent;
    color: #991b1b;
  }

  .tracked-exceptions-icon-button:hover {
    background: #fee2e2;
  }

  .tracked-exceptions-icon-button .icon {
    --icon-size: 1.1rem;
  }

  .tracked-exceptions .empty-state {
    padding: 2rem;
    border: 1px dashed #cfd6e1;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    text-align: center;
  }

  .tracked-exception-topbar {
    margin-bottom: 0.5rem;
  }

  .tracked-exception-actions form {
    display: inline-flex;
  }

  .tracked-exception-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #4b5563;
    font-size: 0.95rem;
    font-weight: 650;
    text-decoration: none;
  }

  .tracked-exception-back:hover {
    color: #111827;
    text-decoration: none;
  }

  .tracked-exception-hero,
  .tracked-exception-panel {
    border: 1px solid #e1e6ee;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  .tracked-exception-hero {
    padding: 0.9rem 1rem;
    margin-bottom: 0.85rem;
  }

  .tracked-exception-kicker {
    margin-bottom: 0.25rem;
    color: #697386;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .tracked-exception h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    line-height: 1.16;
    overflow-wrap: anywhere;
  }

  .tracked-exception-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.8rem;
    margin-top: 0.55rem;
    color: #4b5563;
    font-size: 0.95rem;
  }

  .tracked-exception-summary span + span::before {
    content: "";
    display: inline-block;
    width: 0.35rem;
    height: 0.35rem;
    margin-right: 0.8rem;
    border-radius: 999px;
    background: #d1d5db;
    vertical-align: 0.1em;
  }

  .tracked-exception-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
  }

  .tracked-exception-panel {
    margin-top: 1rem;
    overflow: hidden;
  }

  .tracked-exception-panel h2 {
    margin: 0;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #edf0f5;
    color: #111827;
    background: #f8fafc;
    font-size: 0.95rem;
    font-weight: 800;
  }

  .tracked-exception-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0;
    margin: 0;
  }

  .tracked-exception-details div {
    padding: 0.8rem 1rem;
    border-right: 1px solid #edf0f5;
    border-bottom: 1px solid #edf0f5;
  }

  .tracked-exception-details dt {
    margin-bottom: 0.2rem;
    color: #697386;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .tracked-exception-details dd {
    margin: 0;
    color: #111827;
    overflow-wrap: anywhere;
  }

  .tracked-exception-code {
    margin: 0;
    padding: 1rem;
    overflow: auto;
    color: #1f2937;
    background: #fbfbfc;
    font-size: 0.9rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .tracked-exception-backtrace {
    max-height: 34rem;
    background: #111827;
    color: #e5e7eb;
  }

  .tracked-exception-empty {
    margin: 0;
    padding: 1rem;
    color: #64748b;
  }

  @media (max-width: 720px) {
    .tracked-exceptions,
    .tracked-exception {
      padding-inline: 0.75rem;
    }

    .tracked-exceptions-header {
      flex-direction: column;
    }

    .tracked-exceptions-table {
      display: block;
      overflow-x: auto;
    }

    .tracked-exception-summary span + span::before {
      display: none;
    }
  }
}