/* ==========================================================================
   Image Alt Checker — isolated layout + adaptive results block
   Prefix: iac-
   ========================================================================== */

/* results head */
.iac-results-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.iac-results-title{
  margin: 0;
}

.iac-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.iac-search{
  max-width: 260px;
}

/* summary */
.iac-summary{
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  font-size: 14px;
}

/* table wrapper */
.iac-table-wrap{
  overflow:auto;
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}

/* desktop table */
.iac-table{
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.iac-col-src{ width: 52%; }
.iac-col-alt{ width: 36%; }
.iac-col-status{ width: 140px; }

.iac-thead th{
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.iac-table tbody td{
  padding: 10px 14px;
  vertical-align: middle;
  border-top: 1px solid rgba(255,255,255,.06);
}

.iac-th-status,
.iac-td-status{
  white-space: nowrap;
}

.iac-src,
.iac-alt{
  display:block;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* badges */
.iac-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.iac-ok{ color: rgba(160,255,200,.95); }
.iac-warn{ color: rgba(255,211,107,.95); }
.iac-bad{ color: rgba(255,140,140,.95); }

.iac-muted-row{
  padding: 14px !important;
  color: rgba(255,255,255,.65);
  text-align: left;
  border-top: none !important;
}

/* ==========================================================================
   MOBILE: turn rows into cards (real adaptive)
   ========================================================================== */
@media (max-width: 767px){

  /* controls stack */
  .iac-controls{
    width: 100%;
  }
  .iac-search{
    max-width: none;
    flex: 1 1 220px;
  }

  /* remove classic table header */
  .iac-thead{
    display:none;
  }

  /* make tbody rows cards */
  .iac-table{
    table-layout: auto;
  }

  .iac-table,
  .iac-table tbody,
  .iac-table tr,
  .iac-table td{
    display:block;
    width: 100%;
  }

  .iac-table-wrap{
    overflow: visible; /* cards should not live inside horizontal scroll */
  }

  .iac-table tr{
    margin: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
  }

  .iac-table tbody td{
    border-top: none;
    padding: 10px 12px;
  }

  /* label + value layout */
  .iac-table tbody td::before{
    display:block;
    font-size: 12px;
    color: rgba(255,255,255,.62);
    margin-bottom: 6px;
  }

  .iac-table tbody td:nth-child(1)::before{ content: "Image"; }
  .iac-table tbody td:nth-child(2)::before{ content: "Alt"; }
  .iac-table tbody td:nth-child(3)::before{ content: "Status"; }

  /* allow wrapping on mobile */
  .iac-src,
  .iac-alt{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
  }

  .iac-td-status{
    padding-bottom: 14px;
  }

  /* special row (empty state) */
  .iac-muted-row{
    margin: 10px;
    border-radius: 14px;
    border: 1px dashed rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
  }
}