/* ==========================================================================
   MASH TRADE DESIGN SYSTEM — MODULE: quality (scope: .m-quality)
   PDF পেজ ১৩ — Quality at Every Stage: Technical QA Laboratory Dashboard
   ========================================================================== */

.m-quality__dashboard{
  display:flex;
  flex-direction:column;
  gap:clamp(1.6rem, 3vh, 2.5rem);
}

/* ---------------- Top: 4 Key Metrics Bar ---------------- */
.m-quality__metrics-bar{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(0.75rem, 1.4vw, 1.2rem);
}
@media (min-width:880px){
  .m-quality__metrics-bar{
    grid-template-columns:repeat(4, 1fr);
  }
}

.m-quality__metric-card{
  background:#ffffff;
  border:1px solid rgba(13, 44, 34, 0.08);
  border-radius:18px;
  padding:1.15rem 1.35rem;
  box-shadow:0 4px 18px rgba(0, 0, 0, 0.03);
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  position:relative;
  overflow:hidden;
  transition:all 0.35s var(--mash-ease);
}

.m-quality__metric-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, var(--mash-green-700, #1a5a44), var(--mash-lime, #a4cc3c));
  opacity:0.4;
  transition:all 0.3s ease;
}

.m-quality__metric-card:hover{
  transform:translateY(-4px);
  border-color:rgba(164, 204, 60, 0.55);
  box-shadow:0 14px 32px -8px rgba(7, 27, 21, 0.1);
}
.m-quality__metric-card:hover::before{
  opacity:1;
  height:4px;
}

.m-quality__metric-val{
  font-family:var(--mash-font-display);
  font-size:clamp(1.4rem, 2vw, 1.75rem);
  font-weight:800;
  color:var(--mash-green-950, #071b15);
  line-height:1.1;
  letter-spacing:-0.02em;
}

.m-quality__metric-label{
  font-size:0.88rem;
  font-weight:700;
  color:var(--mash-ink-2, #26332c);
  margin-top:2px;
}

.m-quality__metric-sub{
  font-size:0.72rem;
  color:var(--mash-muted, #5d6b63);
}

/* ---------------- Middle: Layout ---------------- */
.m-quality__layout{
  display:grid;
  gap:clamp(1.5rem, 3.2vw, 3rem);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:960px){
  .m-quality__layout{
    grid-template-columns:1.1fr 0.9fr;
  }
}

/* Left Panel */
.m-quality__panel{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.m-quality__panel-head{
  margin-bottom:0.25rem;
}

.m-quality__panel-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--mash-green-700, #1a5a44);
  background:rgba(18, 62, 47, 0.06);
  padding:3px 9px;
  border-radius:999px;
  margin-bottom:0.5rem;
}

.m-quality__pulse-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#10b981;
  box-shadow:0 0 6px rgba(16, 185, 129, 0.6);
  animation:qaPulse 2s infinite ease-in-out;
}

@keyframes qaPulse{
  0%, 100%{transform:scale(1); opacity:1;}
  50%{transform:scale(1.3); opacity:0.6;}
}

.m-quality__panel-title{
  font-family:var(--mash-font-display);
  font-size:clamp(1.15rem, 1.5vw, 1.35rem);
  font-weight:700;
  color:var(--mash-ink, #0f1613);
  margin:0;
}

.m-quality__params-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0.65rem;
}
@media (min-width:540px){
  .m-quality__params-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

.m-quality__param-item{
  background:#ffffff;
  border:1px solid rgba(13, 44, 34, 0.08);
  border-radius:14px;
  padding:0.75rem 0.95rem;
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  box-shadow:0 2px 8px rgba(0, 0, 0, 0.02);
  transition:all 0.3s ease;
}

.m-quality__param-item:hover{
  border-color:rgba(164, 204, 60, 0.6);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(7, 27, 21, 0.06);
}

.m-quality__param-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.m-quality__param-num{
  font-family:var(--mash-font-display);
  font-size:0.75rem;
  font-weight:800;
  color:var(--mash-lime-600, #8fbb2b);
  letter-spacing:0.04em;
}

.m-quality__param-status{
  font-size:0.64rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:#047857;
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  padding:1px 6px;
  border-radius:999px;
}

.m-quality__param-name{
  font-size:0.86rem;
  font-weight:700;
  color:var(--mash-ink-2, #26332c);
  margin:0;
  line-height:1.24;
}

.m-quality__param-gauge{
  height:4px;
  background:rgba(13, 44, 34, 0.06);
  border-radius:999px;
  overflow:hidden;
  margin-top:2px;
}

.m-quality__param-fill{
  height:100%;
  background:linear-gradient(90deg, var(--mash-green-600, #227054), var(--mash-lime, #a4cc3c));
  border-radius:999px;
}

.m-quality__lead-p{
  font-size:0.88rem;
  color:var(--mash-muted, #5d6b63);
  line-height:1.62;
  margin:0.5rem 0 0;
  padding-left:0.85rem;
  border-left:2px solid var(--mash-lime, #a4cc3c);
}

/* Right Side Visual */
.m-quality__visual-wrapper{
  position:relative;
}

.m-quality__frame{
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 22px 50px -16px rgba(7, 27, 21, 0.22);
  border:1px solid rgba(255, 255, 255, 0.9);
  margin:0;
}

.m-quality__frame img{
  aspect-ratio:4/3;
  width:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.6s var(--mash-ease);
}

.m-quality__visual-wrapper:hover .m-quality__frame img{
  transform:scale(1.03);
}

.m-quality__seal-badge{
  position:absolute;
  bottom:-16px;
  left:16px;
  right:16px;
  background:linear-gradient(145deg, #071b15 0%, #0d2c22 100%);
  color:#ffffff;
  border:1px solid rgba(164, 204, 60, 0.35);
  border-radius:16px;
  padding:0.9rem 1.25rem;
  display:flex;
  align-items:center;
  gap:1rem;
  box-shadow:0 18px 40px -12px rgba(7, 27, 21, 0.85);
}

.m-quality__seal-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  background:rgba(164, 204, 60, 0.15);
  color:var(--mash-lime, #a4cc3c);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.m-quality__seal-badge strong{
  display:block;
  font-family:var(--mash-font-display);
  font-size:0.92rem;
  font-weight:700;
  color:#ffffff;
  line-height:1.2;
}

.m-quality__seal-badge span{
  display:block;
  font-size:0.73rem;
  color:var(--mash-lime, #a4cc3c);
  margin-top:2px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}