:root{
  --brand:#1CA68D; --cta:#04D99D; --gradA:#2CBCA1; --gradB:#63DEC1;
  --mint:#A7F2DD; --mint2:#55D9A8; --text:#07493F; --bg:#EFFFF8;
}

/* Container + header */
#rlta-ic-box{
  background: linear-gradient(135deg,var(--gradA),var(--gradB));
  border:0; border-radius:16px; padding:18px; color:var(--text);
  box-shadow: 0 10px 24px rgba(28,166,141,.18);
}
#rlta-ic-box .inner{ background:#fff; border-radius:14px; padding:16px; }
#rlta-ic-box h3{ margin:0 0 6px; color:#fff; }
#rlta-ic-box p.lead{ margin:0 0 12px; color:#003d34; opacity:.9 }

/* Controls */
#rlta-file{
  width:100%; padding:8px; border:2px solid var(--mint2); border-radius:10px;
}
#rlta-analyze{
  margin-top:10px; width:100%; padding:12px; border:0; border-radius:10px;
  background:var(--cta); color:#003d34; font-weight:700; cursor:pointer;
  box-shadow: 0 6px 16px rgba(4,217,157,.25);
}
#rlta-analyze:hover{ filter:brightness(1.05) }

/* Status + cards */
#rlta-status{
  display:none; margin-top:12px; padding:10px; border-radius:10px;
  background:#E6FFF6; color:#005445; border:1px solid var(--mint2);
}
.rlta-card{
  margin-top:14px; background:#fff; border:2px solid var(--brand);
  border-radius:12px; padding:12px; overflow: hidden;
}

/* ===== Table: desktop/tablet default ===== */
.rlta-table{
  width:100%; border-collapse:separate; border-spacing:0;
  overflow:hidden; border-radius:10px; table-layout: fixed;
}
.rlta-table thead th{
  text-align:left; padding:10px; background:var(--mint);
  color:#003d34; font-weight:700; font-size: 15px;
}
.rlta-table tbody td{
  padding:10px; border-top:1px solid #E0FAF2; color:var(--text);
  vertical-align: middle; word-break: break-word; hyphens: auto;
}

/* First column (thumb + row number badge) */
.rlta-table tbody td:first-child{
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding-left: 36px;              /* room for the absolute badge */
}
.rlta-row-num{
  position: absolute; left: 8px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px; line-height: 22px; text-align: center;
  border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--mint); color:#003d34; border:1px solid var(--mint2);
  z-index: 1;
}

/* Thumbnail */
.rlta-thumb{
  width:78px; height:78px; object-fit:cover;
  border-radius:8px; border:2px solid var(--mint2); background:#fff;
  cursor:zoom-in; flex-shrink: 0; margin-left: 0;
}

/* Totals header */
.rlta-totals{
  margin-top:8px; padding:12px 16px; background:#EFFFF8;
  border:2px solid var(--brand); border-radius:10px;
  color:#003d34; font-size: 16px; text-align: center;
}
.rlta-totals b{ color:#005445; }

/* Lightbox */
#rlta-lightbox{
  position:fixed; inset:0; display:none; background:rgba(0,0,0,.85);
  z-index:9999; align-items:center; justify-content:center; padding:2vw
}
#rlta-lightbox.show{ display:flex }
#rlta-lightbox .inner{ max-width:96vw; max-height:96vh }
#rlta-lightbox img{
  max-width:96vw; max-height:96vh; display:block; border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,.5)
}

/* ===== Tablet tweaks ===== */
@media (max-width: 1024px) {
  .rlta-table thead th{ font-size:14px; padding:8px; }
  .rlta-table tbody td{ padding:8px; }
  .rlta-thumb{ width:70px; height:70px; }
  .rlta-totals{ font-size: 15px; }
}

/* ===== Mobile: turn each row into a labeled card ===== */
@media (max-width: 860px) {
  /* Hide header row; we’ll provide labels via ::before on cells */
  .rlta-table thead { display:none; }

  /* Turn rows into cards */
  .rlta-table,
  .rlta-table tbody,
  .rlta-table tr,
  .rlta-table td { display:block; width:100%; }

  .rlta-table tr{
    background:#fff;
    border:1px solid #E0FAF2;
    border-radius:12px;
    margin:12px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.03);
  }

  /* Label column width (adjusts again at 480px) */
  .rlta-table{ --labelw: 40%; }

  /* First cell (image + row badge) stays visual, no label */
  .rlta-table tbody td:first-child{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px 10px 12px; border:0;
    position: relative; min-height: 60px;
  }
  .rlta-thumb{ width:64px; height:64px; }
  .rlta-row-num{
    left:auto; right:12px; top:12px; transform:none;
    width:24px; height:24px; line-height:24px; font-size:12px;
    background: var(--mint); border-color: var(--mint2);
  }

  /* Remaining cells become "label: value" rows */
  .rlta-table tbody td{
    position: relative;
    padding:10px 12px 10px calc(var(--labelw) + 12px);
    border-top:1px solid #E0FAF2;
    min-height: 44px;
  }
  .rlta-table tbody td::before{
    content: attr(data-label);
    position:absolute; left:12px; top:10px; width:var(--labelw);
    font-weight:700; color:#003d34; font-size:12px; text-transform:uppercase;
    letter-spacing:.02em;
    opacity:.85;
  }

  /* Because our markup doesn't include data-label, map them by column index */
  .rlta-table tbody td:nth-of-type(2)::before{ content:"Manufacturer"; }
  .rlta-table tbody td:nth-of-type(3)::before{ content:"TYPE"; }
  .rlta-table tbody td:nth-of-type(4)::before{ content:"Class"; }
  .rlta-table tbody td:nth-of-type(5)::before{ content:"Pkg"; }
  .rlta-table tbody td:nth-of-type(6)::before{ content:"MPN"; }
  .rlta-table tbody td:nth-of-type(7)::before{ content:"Year"; }
  .rlta-table tbody td:nth-of-type(8)::before{ content:"Price"; }

  /* Tighter fonts on mobile cards */
  .rlta-table tbody td{ font-size:14px; }
  .rlta-totals{ font-size: 14px; padding:10px 12px; }
}

/* ===== Extra-small phones: more compact labels ===== */
@media (max-width: 480px) {
  .rlta-table{ --labelw: 46%; }
  .rlta-thumb{ width:56px; height:56px; }
  .rlta-row-num{ right:10px; top:10px; }
  /* Prevent long MPNs from blowing up layout */
  .rlta-table tbody td:nth-of-type(6){
    word-break: break-all;
  }
}