.panel-incident-list-host {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  container-type: inline-size;
}

.incident-list {
  --list-bg: #111419;
  --list-surface: #191d23;
  --list-line: #343a43;
  --list-muted: #949ca8;
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 280px;
  flex-direction: column;
  overflow: hidden;
  background: var(--list-bg);
  color: #edf1f5;
  font: 12px/1.35 Inter, ui-sans-serif, system-ui, sans-serif;
}

.incident-list * { box-sizing: border-box; }

.incident-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  border-bottom: 1px solid var(--list-line);
  background: #1d2229;
  padding: 7px 10px;
}

.incident-list-header span,
.incident-list-header strong { display: block; }
.incident-list-header span { color: #6cb5ff; font: 700 8px/1.2 ui-monospace, monospace; letter-spacing: .12em; }
.incident-list-header strong { margin-top: 3px; font-size: 14px; }
.incident-list-header button { width: 28px; height: 28px; border: 1px solid var(--list-line); border-radius: 4px; background: #252b33; color: #cdd4dc; cursor: pointer; }
.incident-list-header button:hover { border-color: #58a6ff; color: #58a6ff; }
.incident-list-header button:disabled { opacity: .45; cursor: wait; }

.incident-list-summary { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--list-line); background: #15191f; }
.incident-list-summary span { padding: 7px 5px; border-right: 1px solid #292f37; color: var(--list-muted); font-size: 9px; text-align: center; text-transform: uppercase; }
.incident-list-summary span:last-child { border-right: 0; }
.incident-list-summary strong { color: #edf1f5; font-size: 12px; }

.incident-list-controls { display: grid; grid-template-columns: minmax(130px, 1fr) 110px; gap: 5px; padding: 7px; border-bottom: 1px solid var(--list-line); }
.incident-list-search { position: relative; }
.incident-list-search span { position: absolute; top: 5px; left: 7px; color: var(--list-muted); }
.incident-list-search input { width: 100%; height: 28px; border: 1px solid var(--list-line); border-radius: 3px; outline: 0; background: #0d1014; padding: 0 7px 0 24px; color: #e6edf3; font: inherit; }
.incident-list-search input:focus { border-color: #58a6ff; }
.incident-status-filter { position: relative; min-width: 0; font-size: 10px; }
.incident-status-filter summary {
  display: flex;
  width: 100%;
  height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  overflow: hidden;
  border: 1px solid var(--list-line);
  border-radius: 3px;
  background: #0d1014;
  padding: 0 6px;
  color: #e6edf3;
  cursor: pointer;
  list-style: none;
}
.incident-status-filter summary::-webkit-details-marker { display: none; }
.incident-status-filter summary:focus-visible { border-color: #58a6ff; outline: 0; }
.incident-status-filter-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.incident-status-filter-caret { flex: 0 0 auto; color: var(--list-muted); transition: rotate .12s ease; }
.incident-status-filter[open] .incident-status-filter-caret { rotate: 180deg; }
.incident-status-filter-menu {
  position: absolute;
  z-index: 5;
  top: 31px;
  right: 0;
  display: grid;
  width: 142px;
  border: 1px solid #46505c;
  border-radius: 4px;
  background: #171c22;
  padding: 4px;
  box-shadow: 0 8px 20px #0009;
}
.incident-status-filter:not([open]) .incident-status-filter-menu { display: none; }
.incident-status-filter-option { display: flex; height: 25px; align-items: center; gap: 7px; border-radius: 3px; padding: 0 5px; color: #d8dee5; cursor: pointer; }
.incident-status-filter-option:hover { background: #26313c; }
.incident-status-filter-option input { width: 13px; height: 13px; margin: 0; accent-color: #58a6ff; }

.incident-list-columns,
.incident-list-row { display: grid; grid-template-columns: minmax(145px, 1fr) 70px 66px; gap: 7px; align-items: center; }
.incident-list-columns { min-height: 23px; border-bottom: 1px solid var(--list-line); padding: 0 8px; color: #717985; font: 700 8px/1 ui-monospace, monospace; text-transform: uppercase; }
.incident-list-columns span:not(:first-child) { text-align: right; }

.incident-list-rows { flex: 1; min-height: 0; overflow: auto; }
.incident-list-row { position: relative; min-height: 61px; border-bottom: 1px solid #2b3037; padding: 7px 8px 7px 11px; cursor: default; }
.incident-list-row::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: #777f8b; content: ""; }
.incident-list-row:hover { background: #20262e; }
.incident-list-row:focus-visible { z-index: 1; outline: 1px solid #58a6ff; outline-offset: -1px; background: #202b37; }
.incident-list-row.status-active::before { background: #42d17d; }
.incident-list-row.status-progress::before { background: #4da3ff; }
.incident-list-row.status-new::before { background: #b88cff; }
.incident-list-row.status-waiting::before { background: #e0a83e; }
.incident-list-row.status-closed::before { background: #7b8490; }
.incident-list-row.status-cancelled::before { background: #d16d6d; }

.incident-list-identity { min-width: 0; }
.incident-list-row-heading { display: flex; min-width: 0; align-items: center; gap: 6px; }
.incident-list-row-heading strong,
.incident-list-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.incident-list-row-heading strong { font-size: 11px; }
.incident-list-identity small { display: block; margin-top: 3px; color: #bac1ca; font-size: 10px; }
.incident-list-identity .incident-list-address { margin-top: 1px; color: #707986; font-size: 9px; }
.incident-list-urgency { display: inline-grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; border-radius: 3px; background: #48515d; color: #fff; font: 800 9px/1 ui-monospace, monospace; }
.incident-list-urgency.urgency-u { background: #626c78; }
.incident-list-urgency.urgency-a { background: #c8403b; }
.incident-list-urgency.urgency-h { background: #d58a30; color: #21180d; }
.incident-list-urgency.urgency-v1 { background: #75bd91; color: #102519; }
.incident-list-urgency.urgency-v2 { background: #28704b; }
.incident-list-status { justify-self: end; border: 1px solid #46505b; border-radius: 10px; padding: 2px 6px; color: #c5ccd5; font-size: 9px; }
.incident-list-updated { justify-self: end; color: #7e8793; font: 9px/1.25 ui-monospace, monospace; text-align: right; }
.incident-list-empty { margin: 18px 12px; color: var(--list-muted); font: 10px/1.5 ui-monospace, monospace; text-align: center; }
.incident-list-help { min-height: 25px; border-top: 1px solid var(--list-line); padding: 6px 8px; color: #717985; font: 8px/1.4 ui-monospace, monospace; text-align: center; text-transform: uppercase; }

@container (max-width: 330px) {
  .incident-list-columns,
  .incident-list-row { grid-template-columns: minmax(130px, 1fr) 64px; }
  .incident-list-columns span:last-child,
  .incident-list-updated { display: none; }
}