.control-panel { min-width: 0; }
.control-heading { align-items: flex-start; }
.control-state:not([hidden]) { margin: 18px 0; }
.control-state .ui-state { background: rgba(255, 255, 255, .84); }

.control-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.control-summary article {
  min-width: 0;
  min-height: 112px;
  padding: 15px;
  border: 1px solid var(--xp-line);
  border-radius: 17px;
  background: rgba(255, 255, 255, .88);
}
.control-summary article.critical { background: linear-gradient(145deg, #fff, #fff0f2); }
.control-summary article.resolved { background: linear-gradient(145deg, #fff, #eef9e2); }
.control-summary span,
.control-summary small,
.control-summary strong { display: block; overflow-wrap: anywhere; }
.control-summary span { color: var(--xp-muted); font-size: 9px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.control-summary strong { margin: 11px 0 5px; font-size: 29px; }
.control-summary small { color: #777b76; font-size: 9px; line-height: 1.35; }

.control-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  gap: 12px;
  align-items: end;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--xp-line);
  border-radius: 18px;
  background: rgba(249, 249, 245, .78);
}
.control-filters label,
.control-actions label {
  min-width: 0;
  color: var(--xp-muted);
  font-size: 11px;
  font-weight: 800;
}
.control-filters input,
.control-filters select,
.control-actions input,
.control-actions select,
.control-actions textarea { width: 100%; margin-top: 6px; }
.control-search { grid-column: span 2; }
.control-filter-actions {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 8px;
}

.control-list-summary {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 16px 2px 0;
  color: var(--xp-muted);
}
.control-list-summary span,
.control-list-summary small { font-size: 11px; }
.control-list-summary strong { color: var(--xp-text); font-size: 20px; }
.control-list-summary small { margin-left: auto; }

.control-workspace {
  display: grid;
  grid-template-columns: minmax(260px, .65fr) minmax(0, 1.35fr);
  gap: 16px;
  align-items: start;
  margin-top: 12px;
}
.control-list-column,
.control-detail { min-width: 0; }
.control-list { display: grid; gap: 10px; }
.control-card {
  position: relative;
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 15px 15px 15px 18px;
  color: var(--xp-text);
  border: 1px solid rgba(16, 17, 22, .10);
  border-radius: 17px;
  background: rgba(255, 255, 255, .90);
  box-shadow: none;
  text-align: left;
}
.control-card::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 7px;
  width: 3px;
  border-radius: 3px;
  background: #99a09b;
}
.control-card.severity-critical::before { background: #d3485b; }
.control-card.severity-high::before { background: #ed8954; }
.control-card.severity-medium::before { background: #d5a62b; }
.control-card.severity-info::before { background: #5d70d7; }
.control-card:hover,
.control-card.selected {
  border-color: rgba(68, 98, 255, .58);
  background: #fff;
  transform: translateY(-1px);
}
.control-card.selected { box-shadow: 0 0 0 2px rgba(68, 98, 255, .08); }
.control-card-head,
.control-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.control-card > strong,
.control-card-context { overflow-wrap: anywhere; }
.control-card > strong { font-size: 13px; line-height: 1.4; }
.control-card-context { color: var(--xp-muted); font-size: 10px; line-height: 1.45; }
.control-card-footer { color: #747873; font-size: 9px; }
.control-load-more { width: 100%; margin-top: 10px; }

.control-pill {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  color: #40443f;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #eceee9;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.control-pill.severity-critical { color: #8e2a3c; border-color: rgba(169, 44, 67, .12); background: #ffe7ec; }
.control-pill.severity-high { color: #89451e; border-color: rgba(181, 94, 47, .14); background: #ffeadb; }
.control-pill.severity-medium { color: #655000; border-color: rgba(182, 143, 0, .15); background: #fff1bd; }
.control-pill.severity-info { color: #3e4f9f; border-color: rgba(68, 98, 255, .12); background: #e9edff; }

.control-detail {
  padding: 20px;
  border: 1px solid var(--xp-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .93);
}
.control-detail-header,
.control-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.control-detail-header > div,
.control-section-heading > div { min-width: 0; }
.control-detail-header h4 { margin: 4px 0 0; overflow-wrap: anywhere; font-size: clamp(20px, 2.7vw, 31px); line-height: 1.08; letter-spacing: -.035em; }
.control-detail-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.control-context { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.control-context-chip {
  display: inline-flex;
  padding: 5px 9px;
  color: #535a68;
  border: 1px solid rgba(16, 17, 22, .09);
  border-radius: 999px;
  background: #f6f7fa;
  font-size: 10px;
  font-weight: 750;
}

.control-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}
.control-meta-grid > div { min-width: 0; padding: 12px; border-radius: 14px; background: #f5f6f4; }
.control-meta-grid span,
.control-meta-grid strong { display: block; overflow-wrap: anywhere; }
.control-meta-grid span { color: var(--xp-muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.control-meta-grid strong { margin-top: 6px; font-size: 11px; }

.control-reason,
.control-actions,
.control-history {
  margin-top: 18px;
  padding: 15px;
  border: 1px solid rgba(16, 17, 22, .09);
  border-radius: 16px;
  background: #fafaf7;
}
.control-actions { border-color: rgba(68, 98, 255, .16); background: rgba(68, 98, 255, .04); }
.control-section-heading h5 { margin: 3px 0 0; font-size: 16px; }
.control-reason > p { margin: 12px 0 0; font-size: 12px; line-height: 1.55; }
.control-reason dl { display: grid; gap: 6px; margin: 13px 0 0; }
.control-reason dl > div { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr); gap: 10px; padding: 8px 10px; border-radius: 10px; background: #fff; }
.control-reason dt { color: var(--xp-muted); font-size: 10px; }
.control-reason dd { margin: 0; overflow-wrap: anywhere; font-size: 10px; font-weight: 800; }
.control-source-link { display: inline-flex; margin-top: 13px; text-decoration: none; }
.control-reason .section-help { margin-top: 12px; }

.control-actions form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  margin-top: 12px;
}
.control-actions textarea { resize: vertical; }
.control-actions #control-action-reason-field { grid-column: 1 / -1; }
.control-actions button { justify-self: end; }
.control-actions .control-state { grid-column: 1 / -1; }

.control-events { display: grid; gap: 8px; margin-top: 12px; }
.control-event { display: grid; gap: 6px; padding: 12px; border: 1px solid rgba(16, 17, 22, .08); border-radius: 13px; background: #fff; }
.control-event-head { display: flex; justify-content: space-between; gap: 10px; }
.control-event strong { font-size: 11px; }
.control-event time,
.control-event small { color: var(--xp-muted); font-size: 9px; }
.control-event p { margin: 0; overflow-wrap: anywhere; font-size: 11px; line-height: 1.5; }
.control-event-reason { padding: 8px; border-radius: 9px; background: #f5f6f4; }
.control-event-empty { margin: 0; color: var(--xp-muted); font-size: 10px; }

@media (max-width: 1180px) {
  .control-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .control-filters { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
  .control-workspace { grid-template-columns: minmax(230px, .55fr) minmax(0, 1.45fr); }
  .control-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  .control-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-workspace { grid-template-columns: 1fr; }
  .control-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .control-panel { padding: 15px; }
  .control-heading { display: grid; }
  .control-heading button { width: 100%; }
  .control-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-filters,
  .control-list,
  .control-actions form { grid-template-columns: 1fr; }
  .control-search,
  .control-actions #control-action-reason-field { grid-column: 1; }
  .control-filter-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .control-filter-actions button,
  .control-actions button { width: 100%; }
  .control-list-summary { flex-wrap: wrap; }
  .control-list-summary small { width: 100%; margin-left: 0; }
  .control-detail { padding: 15px; }
  .control-detail-header { display: grid; }
  .control-detail-badges { justify-content: flex-start; }
}

@media (max-width: 390px) {
  .control-panel { padding: 12px; }
  .control-summary { grid-template-columns: 1fr; }
  .control-summary article { min-height: 96px; }
  .control-detail { padding: 12px; border-radius: 16px; }
  .control-meta-grid { grid-template-columns: 1fr; }
  .control-reason dl > div { grid-template-columns: 1fr; gap: 4px; }
  .control-event-head { display: grid; }
}