:root{
  --row-radius: 12px;
  --control-radius: 10px;
  --chip-radius: 999px;
  --badge-radius: 999px;
  --card-border: 1px solid rgba(148,163,184,.25);
  --card-bg: #fff;
  --card-shadow: 0 10px 20px rgba(15,23,42,.05);
}

.card,
.panel,
.row-card{
  background:var(--card-bg);
  border:var(--card-border);
  border-radius:var(--row-radius);
  box-shadow:var(--card-shadow);
  overflow:hidden;
  min-width:0;
}

.card-body,
.panel-body{
  padding:16px;
}

.row-card{
  padding:12px 14px;
}

.row-card.compact{
  padding:8px 10px;
}

.item-row,
.op-row,
.responsive-item-row{
  width:100%;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  align-items:center;
}

.item-row .item-title{
  font-weight:800;
  font-size:15px;
  line-height:1.2;
  overflow-wrap:anywhere;
}

.item-row .item-heading{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1 1 220px;
}

.item-row .item-subtitle,
.item-row .item-meta{
  font-size:12px;
  color:#64748b;
  line-height:1.35;
}

.field-group{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.field-group.par-field,
.field-group.qty-field{
  border:1px solid rgba(148,163,184,.25);
  border-radius:8px;
  background:rgba(255,255,255,.62);
  padding:6px 8px;
  min-height:42px;
  justify-content:center;
}

.item-row .par-field{
  flex:0 0 56px;
}

.item-row .qty-field{
  flex:0 0 104px;
}

.field-group.par-field{
  background:transparent;
  border-style:dashed;
}

.field-label{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:#64748b;
}

.field-value,
.field-input{
  min-width:0;
  width:100%;
}

.field-input{
  border:1px solid rgba(148,163,184,.35);
  border-radius:var(--control-radius);
  background:#fff;
  padding:8px 10px;
  min-height:38px;
}

.field-input.compact{
  padding:7px 10px;
  min-height:34px;
}

.notes-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  flex:1 1 220px;
  max-width:260px;
}

.notes-field .notes-input{
  width:100%;
  max-width:260px;
}

.notes-field .notes-input.compact{
  padding:8px 10px;
  min-height:34px;
}

.chip-group,
.button-group,
.status-group{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  min-width:0;
}

.item-row .fill-action,
.item-row .verify-action{
  flex:0 0 auto;
}

.item-row .chip-group{
  flex:0 0 auto;
}

.item-row .status-group{
  flex:0 0 auto;
  margin-left:auto;
}

.chip-group.tight,
.button-group.tight{
  gap:4px;
}

.chip,
.shortcut-chip,
.status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  white-space:nowrap;
}

.chip,
.shortcut-chip{
  padding:5px 9px;
  border-radius:var(--chip-radius);
  border:1px solid rgba(148,163,184,.22);
  background:#e8eef7;
  color:#1e3a8a;
  font-size:11px;
  font-weight:700;
  min-height:28px;
}

.shortcut-chip.is-active{
  background:#dbeafe;
}

.status-badge{
  padding:6px 10px;
  border-radius:var(--badge-radius);
  font-size:11px;
  font-weight:800;
  line-height:1;
  min-height:28px;
}

.status-badge.good{
  background:#dcfce7;
  color:#166534;
}

.status-badge.warn{
  background:#fef3c7;
  color:#92400e;
}

.status-badge.bad{
  background:#fee2e2;
  color:#991b1b;
}

.status-badge.neutral{
  background:#eef2ff;
  color:#3730a3;
}

.btn{
  min-height:40px;
  padding:9px 14px;
  border-radius:var(--control-radius);
}

.btn-pill{
  border-radius:var(--chip-radius);
}

.btn.compact{
  min-height:34px;
  padding:7px 10px;
  font-size:12px;
}

.btn-group{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.btn-group.tight{
  gap:6px;
}

.badge-stack{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.compact-meta{
  font-size:12px;
  color:#64748b;
  line-height:1.35;
}

.responsive-item-row{
  display:flex;
  flex-wrap:wrap;
}

@media (min-width: 768px){
  .item-row,
  .responsive-item-row{
    grid-template-columns:minmax(220px,2fr) 56px 104px 72px 92px auto minmax(220px,1.6fr) auto;
    gap:10px 12px;
  }

  .item-row > .item-title,
  .item-row > .item-heading{
    grid-column:1;
  }

  .item-row > .par-field{
    grid-column:2;
  }

  .item-row > .qty-field{
    grid-column:3;
  }

  .item-row > .fill-action{
    grid-column:4;
  }

  .item-row > .verify-action{
    grid-column:5;
  }

  .item-row > .chip-group{
    grid-column:6;
  }

  .item-row > .notes-field{
    grid-column:7;
  }

  .item-row > .status-group{
    grid-column:8;
    justify-self:end;
  }
}

@media (min-width: 1200px){
  .item-row,
  .responsive-item-row{
    grid-template-columns:minmax(220px,2fr) 56px 104px 72px 92px auto minmax(220px,1.6fr) auto;
  }
}