/* ==========================================================================
   broken-links-checker.css
   ONLY blc-* classes here (besides your global tool-*).
   Fixes:
   - loader animation (dots)
   - OK/Warn/Bad badges
   - row highlighting
   - clean table alignment + responsive scroll
   ========================================================================== */

.blc-grid{
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 14px;
}

@media (max-width: 980px){
  .blc-grid{ grid-template-columns: 1fr; }
}

.blc-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.blc-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.blc-field{
  display: flex;
  align-items: center;
  gap: 8px;
}

.blc-field__label{
  font-size: 12px;
  opacity: .75;
}

.blc-kpis{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin-top: 10px;
}

@media (max-width: 980px){
  .blc-kpis{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.blc-kpi{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 12px 12px;
}

.blc-kpi__n{
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.blc-kpi__t{
  font-size: 12px;
  opacity: .72;
  margin-top: 6px;
}

.blc-meta{
  margin-top: 10px;
  opacity: .9;
  line-height: 1.35;
}

/* =========================
   Button loader animation
   ========================= */

.blc-dots{
  display: none; /* hidden by default */
  margin-left: 8px;
}

.tool-btn.is-loading .blc-dots{
  display: inline-flex; /* show automatically when class is-loading */
}

.tool-btn.is-loading{
  cursor: progress;
  opacity: .95;
}

.dots3{
  display: inline-flex;
  gap: 4px;
  vertical-align: middle;
}

.dots3 i{
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: currentColor;
  display: inline-block;
  opacity: .45;
  transform: translateY(0);
  animation: blcDots 1s infinite ease-in-out;
}

.dots3 i:nth-child(2){ animation-delay: .12s; }
.dots3 i:nth-child(3){ animation-delay: .24s; }

@keyframes blcDots{
  0%, 80%, 100% { opacity: .35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

/* =========================
   Tables
   ========================= */

.blc-section-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.blc-table-wrap{
  width: 100%;
  overflow: auto;
  margin-top: 12px;
  border-radius: 14px;
  -webkit-overflow-scrolling: touch;
}

.blc-table{
  width: 100%;
  min-width: 820px;
  border-collapse: separate;
  border-spacing: 0;
}

.blc-col-num{ width: 56px; }
.blc-col-follow{ width: 160px; }
.blc-col-type{ width: 120px; }
.blc-col-status{ width: 170px; }

.blc-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
}

.blc-table td,
.blc-table th{
  vertical-align: top;
}

.blc-td-num{
  padding-top: 14px;
}

.blc-td-mid{
  padding-top: 12px;
}

.blc-td-status{
  padding-top: 10px;
  white-space: nowrap;
}

.blc-url{
  word-break: break-word;
}

.blc-sub{
  margin-top: 8px;
  font-size: 12px;
}

.blc-issues{
  opacity: .92;
}

/* pills */
.blc-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  font-size: 12px;
  white-space: nowrap;
}

.blc-pill--muted{
  opacity: .85;
}

/* =========================
   Status badges (nice colors)
   ========================= */

.blc-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.14);
  white-space: nowrap;
}

.blc-badge--ok{
  background: rgba(34, 197, 94, .18);
  border-color: rgba(34, 197, 94, .40);
}

.blc-badge--warn{
  background: rgba(245, 158, 11, .18);
  border-color: rgba(245, 158, 11, .40);
}

.blc-badge--bad{
  background: rgba(239, 68, 68, .18);
  border-color: rgba(239, 68, 68, .40);
}

.blc-status{
  margin-left: 8px;
  opacity: .92;
}

/* =========================
   Row highlighting (THIS is what you wanted)
   ========================= */

.blc-tr{
  transition: background-color .15s ease, box-shadow .15s ease;
}

/* OK row */
.blc-tr--ok{
  background: rgba(34, 197, 94, .06);
}

/* Warning row */
.blc-tr--warn{
  background: rgba(245, 158, 11, .06);
}

/* Broken row */
.blc-tr--bad{
  background: rgba(239, 68, 68, .07);
}

/* Hover stronger */
.blc-tr--ok:hover{ background: rgba(34, 197, 94, .10); }
.blc-tr--warn:hover{ background: rgba(245, 158, 11, .10); }
.blc-tr--bad:hover{ background: rgba(239, 68, 68, .12); }