/* TCHC UX R2 */
:root{
  --tchc-border:#dfe5ec;
  --tchc-muted:#667085;
  --tchc-info:#175cd3;
  --tchc-ok:#027a48;
  --tchc-warn:#b54708;
  --tchc-danger:#b42318;
}
.tchc-r2-alert-panel{
  margin:12px 0 16px;
  padding:12px 14px;
  border:1px solid var(--tchc-border);
  border-radius:10px;
  background:#fff;
  font-family:Arial,sans-serif;
}
.tchc-r2-alert-head{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.tchc-r2-alert-title{font-weight:700}
.tchc-r2-alert-summary{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px;
}
.tchc-r2-chip{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  background:#f2f4f7;
  font-size:12px;
}
.tchc-r2-chip.critical{background:#fef3f2;color:var(--tchc-danger)}
.tchc-r2-chip.warning{background:#fffaeb;color:var(--tchc-warn)}
.tchc-r2-chip.info{background:#eff8ff;color:var(--tchc-info)}
.tchc-r2-alert-list{margin:10px 0 0;padding-left:18px}
.tchc-r2-alert-list li{margin:5px 0}
.tchc-r2-muted{color:var(--tchc-muted);font-size:12px}
.tchc-r2-table-scroll{
  width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.tchc-r2-table-scroll>table{min-width:760px}
.tchc-r2-status{
  display:inline-block;
  padding:3px 7px;
  border-radius:999px;
  font-size:12px;
  white-space:nowrap;
}
.tchc-r2-status.ok{background:#ecfdf3;color:var(--tchc-ok)}
.tchc-r2-status.warning{background:#fffaeb;color:var(--tchc-warn)}
.tchc-r2-status.danger{background:#fef3f2;color:var(--tchc-danger)}
.tchc-r2-status.info{background:#eff8ff;color:var(--tchc-info)}
.tchc-r2-long.collapsed{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.tchc-r2-more{
  border:0!important;
  background:transparent!important;
  color:var(--tchc-info)!important;
  padding:4px 0!important;
  margin:2px 0 0!important;
  box-shadow:none!important;
  font-size:12px!important;
}
.tchc-r2-ai-link{
  display:inline-block;
  text-decoration:none;
  padding:8px 11px;
  border-radius:8px;
  background:#17538c;
  color:#fff!important;
  font-size:13px;
  font-weight:600;
}
@media(max-width:768px){
  body{overflow-x:hidden}
  .tchc-r2-alert-head{align-items:flex-start}
  .tchc-r2-alert-panel{margin-left:0;margin-right:0}
  select,input,textarea,button{max-width:100%}
}